|
|
Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Меню на ucoz многоуровневое |
Меню на ucoz многоуровневое |
Добрый день!
Подскажите пожалуйста как сделать так, чтобы при переходе на определенную страницу выделялась соответствующая вкладка, а также под ней подстраница активная! Прикладываю пример + код! Заранее благодарю! Код <div id="nav"> <ul class="current"> <!-- <<<== активное меню --> <li><a href="#"><b>Розница</b></a></li> </ul> <ul class="sub_active"> <!-- <<<== активное подменю меню --> <li><a href="#">Азартные</a></li> <li><a href="#">Гонки</a></li> <li class="current_sub"><a href="#">Стратегии</a></li> <!-- <<<== активная страница --> <li><a href="#">Аркады</a></li> <li><a href="#">Спорт</a></li> <li><a href="#">RPG(Ролевые)</a></li> <li><a href="#">Логические </a></li> </ul> <ul class="select"> <li><a href="#"><b>Опт</b></a> <ul class="sub"> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> <li><a href="#">Карта сайта</a></li> <li><a href="#">Как нас найти</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="#"><b>Печать</b></a> <ul class="sub"> <li><a href="#">На сегодня</a></li> <li><a href="#">На завтра</a></li> <li><a href="#">На месяц</a></li> <li><a href="#">На неделю</a></li> <li><a href="#">На 85 лет вперед</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="#"><b>Цены</b></a> <ul class="sub"> <li><a href="#">Для мальчиков</a></li> <li><a href="#">Для девочек</a></li> <li><a href="#">Для всех подряд</a></li> <li><a href="#">знакомства</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="#"><b>Наша работа</b></a> <ul class="sub"> <li><a href="#">Аудио-видео плееры</a></li> <li><a href="#">Безопасность и защита</a></li> <li><a href="#">Интернет</a></li> <li><a href="#">Общение (Messeger/Chat/E-mail)</a></li> <li><a href="#">Файловые менеджеры, архиваторы</a></li> <li><a href="#">Экранные утилиты</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="#"><b>О производстве</b></a> <ul class="sub"> <li><a href="#">Аудио-видео плееры</a></li> <li><a href="#">Безопасность и защита</a></li> <li><a href="#">Интернет</a></li> <li><a href="#">Общение (Messeger/Chat/E-mail)</a></li> <li><a href="#">Файловые менеджеры, архиваторы</a></li> <li><a href="#">Экранные утилиты</a></li> </ul> </li> </ul> <ul class="select"> <li><a href="#"><b>Наши контакты</b></a> <ul class="sub"> <li><a href="#">Аудио-видео плееры</a></li> <li><a href="#">Безопасность и защита</a></li> <li><a href="#">Интернет</a></li> <li><a href="#">Общение (Messeger/Chat/E-mail)</a></li> <li><a href="#">Файловые менеджеры, архиваторы</a></li> <li><a href="#">Экранные утилиты</a></li> </ul> </li> </ul> </div> Код CSS Код ul#nav { list-style-type:none; margin:0; padding:0; } #nav { float:left; width:100%; height:75px; /* Высота всего меню (и верхнего уровня и нижнего, все вместе) */ position:relative; margin:10px 0 40px; /* Отступ сверху и снизу от меню */ } #nav .select, #nav .current { margin:0; padding:0; list-style:none; display:block; } #nav li { font-family: Arial; /* Шрифт меню */ display:inline; margin:0; padding:0; height:auto; } #nav .select a, #nav .current a { display:block; height:40px; /* Высота верхнего уровня */ float:left; background: url("/images/left_nav.png") no-repeat left top; /* Путь к левому изображению */ padding:0 0 0 5px; text-decoration:none; font-size:14px; /* Размер шрифта верхнего уровня */ line-height:40px; white-space:nowrap; margin-right: 2px; /* Отступы пунктов верхнего уровня */ position: relative; z-index: 500; } #nav .select a b, #nav .current a b { height:100%; display:block; background:url("/images/right_nav.png") no-repeat right top; /* Путь к правому изображению */ padding:0 20px 0 15px; color:#ddd; /* Цвет ссылок верхнего уровня */ } #nav .select a:hover, #nav .select li:hover a { background-position:0 -50px; cursor:pointer; } #nav .select a:hover b, #nav .select li:hover a b { background-position:100% -50px; color:#fff; } #nav .sub { display:none; } #nav .current a { background-position:0 -50px; border-color:#046; } #nav .current a b { background-position:100% -50px; color:#fff; /* Цвет шрифта активного меню верхнего уровня */ } #nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover, #nav .sub_active .current_sub a, #nav .sub_active a:hover { color:#fff; /* Цвет шрифта активного меню нижнего уровня */ text-decoration:underline; } #nav .select li a:hover .sub, #nav .select li:hover .sub, #nav .sub_active { display:block; position:absolute; width:100%; height: 35px; top:40px; left:0; background:#171717; /* Фон нижнего уровня */ padding:0; z-index:100; } #nav .sub_active { z-index:10; } #nav .sub, #nav .sub_active { margin:0; padding:0; list-style:none; } * html #nav .sub_active, * html #nav .select a:hover .sub { z-index:-1; margin-top:0; margin-top:1px; } #nav .sub_active a { height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal; } #nav .sub_active a, #nav .select a:hover .sub li a, #nav .select li:hover .sub li a { display:inline; background:none; padding:0 10px; margin:0; font-size:13px; /* Размер шрифта нижнего уровня */ width:auto; white-space:nowrap; font-weight:normal; border:0; color:#eee; /* Цвет шрифта нижнего уровня */ height:35px; line-height:35px; } Прикрепления:
0874198.jpg
(37.1 Kb)
Любые вопросы по системе uCoz. Качественная техническая поддержка сайтов и любые консультации
|
| |||
| |||