Дизайн и Верстка > Всё о Html

Выпадающее CSS-меню (без JavaScript)

(1/1)

Egorsha:
Много раз встречал утверждение, что  выпадающее меню нельзя сделать используя CSS и не  используя JavaScript. Оказывается, что это не совсем верно... Прочитав статью http://wa.artel.by/node.phtml?index=26 обнаружил, что задача в принципе решаема и только средствами CSS. Не во всех броузерах работает (что конечно не очень хорошо), но думаю все равно будет интересно посмотреть, как это делается. Может кому и пригодится.... Вдруг кто-то захочет к ссылке в тексте меню приделать....  

Код немного длинноват -:)  Не сокращаю, чтобы показать, что уровней вложенности может быть очень много (здесь 4 уровня)...

Удачи!!!

--------------------------------


CSS-меню

table { background-color: #000000;}
td {  font-family: "Tahoma", "Verdana", "Helvetica";
      font-size: 10pt;
      font-weight: 600;  
      background-color: #cccccc; }
a.a0 { font-family: "Tahoma", "Verdana", "Helvetica";
       font-size: 10pt;
       font-weight: 600;  
       color: #660066; }
a.a0:hover  { color: #000066; }
a.a1 { font-family: "Tahoma", "Verdana", "Helvetica";
       font-size: 10pt;
       font-weight: 600;  
       color: #660066; }
a.a1 span.s1       { display: none; }
a.a1:hover span.s1 { display: inline;
                     position: absolute;
                     left: 45pt; }
a.a1:hover      { display: inline;
                  color: #000066; }
a.a2 { font-family: "Tahoma", "Verdana", "Helvetica";
       font-size: 10pt;
       font-weight: 600;  
       color: #660066; }
a.a2 span.s2       { display: none; }
a.a2:hover span.s2 { display: inline;
                     position: absolute;
                     left: 40pt; }
a.a2:hover { display: inline;
             color: #000066; }
a.a3 { font-family: "Tahoma", "Verdana", "Helvetica";
       font-size: 10pt;
       font-weight: 600;  
       color: #660066; }
a.a3 span.s3       { display: none; }
a.a3:hover span.s3 { display: inline;
                     position: absolute;
                     left: 40pt; }
a.a3:hover { display: inline;
             color: #000066; }





МЕНЮ1



ПУНКТ1
ПУНКТ2



ПУНКТ1
ПУНКТ2
ПУНКТ3
ПУНКТ4



ПУНКТ3
ПУНКТ4
ПУНКТ5



ПУНКТ1
ПУНКТ2



ПУНКТ1
ПУНКТ2
ПУНКТ3
ПУНКТ4












МЕНЮ2


ПУНКТ1
ПУНКТ2
ПУНКТ3



ПУНКТ1
ПУНКТ2
ПУНКТ3
ПУНКТ4

ЖеньКа:
Да так то даже на самом вебскрипте была статья об этом... Так что Америки нет ;)

Навигация

[0] Главная страница сообщений