копировать будем меню из ФФ, хотя большой роли это неиграет, только цвета и шрифт
допустим мы имеем меню из следующих пунктов:
1. Открыть
2. Открыть в новом окне
3. Развернуть
4. Развернуть все - неактивное(допустим)
5. Свернуть
6. Свернуть все - неактиное (допустим)
Наш код HTML
CODE
<div class="cont_men" id = "menu"> <!-- idшник чтоб подрубилось меню к скрипту в "части 1"-->
<a href="#">Открыть </a>
<a href="#" >Открыть в новом окне </a>
<a href="#">Развернуть </a>
<a href="#" class = 'disabl'>Развернуть все </a>
<a href="#">Свернуть </a>
<a href="#" class = 'disabl'>Свернуть все </a>
</div>
*Все что вы щас видете это только для наглядности, ибо в реальности таких пунктов может быть немеренно и все другие!! (мое же примечани ,) )
Теперь займемся CSS
CODE
.cont_men { /* контент для меню */
border-top:1px #FFFFFF solid;
border-right:1px #FFFFFF solid;
border-bottom:1px #808080 solid;
border-left:1px #808080 solid;
background-color: #D4D0C8;
font-size:12px;
font-family:verdana;
position:absolute;
top:100px; /* начальные координаты */
left:100px; /* для наглядности */
cursor:default;
padding:2 2 2 2;
}
.cont_men a /* пункты меню - ссылки, в дальнейшем просто добавлять события нуна*/
{
font-family: verdana;
font-size: 11px;
cursor:default;
text-indent:15px;
color:#000000; /*Цвет активного пункта*/
text-decoration:none;
display:block;
padding:3 0 3 0;
}
.cont_men a.disabl { color : #999999; } /*Цвет неативного пункта*/
.cont_men a.disabl:hover { color : #bbb;} /* Эффект бегающего синего столбца */
.cont_men a:hover { color:#FFFFFF; background-color:#000066;} /*Цвет неативного пункта под синим столбцом*/
Ну.. разжувал - куда уж некуда круче ,) - бери - да подрубай
Вот, осталось только заполнить эти пункты экшинами - например:
CODE
<a href="#" onClick = "hidden(); return false">Свернуть </a>
..
или
CODE
<a href="#" onClick = "this.href = 'http://softsoul.com'; this.target = 'blank'">Открыть в новом окне </a>
и тд ))
В следующей части будет рассмотренно создание подменю, подобных мозиле ФФ
В атаче пример
