Выпадающее меню сайта - горизонтальное
 | |
| С начало посмотрел на это меню, ну да простое, но что то подсказало проверить его. Лучше простое но чтоб рабочее полностью было. Когда поставил оно мне очень понравилось. По своему дизайну и фактура у меню красивая. Просто сами блоки лежат на синем форе. Разделы по цвету серые с темна и поверх стильно сделана светлая полоса. Когда наводишь на раздел то светлеет все и что главное все отчетливо видно. Можно просто поместить к примеру несколько тематик на его и у каждой темы будит плавно выезжать под меню где пользователь может спокойно найти что искал. А это как говорил самое главное на сайте. Чтоб было все работающее и найти все было не сложно. Все для того чтоб гости регистрировались и им было комфортно. Забыл сказать что код идет с CSS и вы можете спокойно его под настроить по оттенку цвета или по длине и ширине, все ващих руках. Установка проста: Если стандартно под шапку, то вверх сайта и под самый последний нижний код прописываем наш код. Или где вы хотели бы видеть его. но лучше и красиво то под шапкой вашего портала. Код <style> a,a:visited, a:hover, a:active, a:focus {outline:0;} #bazablock { background:#09c; height:28px; padding:5px; position:relative; } #optimalhead { position:absolute; left:5px; top:5px; width:740px; overflow:hidden; } dl.dscss3menu { width:286px; float:left; margin:-32700px -187px 0 0; } dl.dscss3menu a { display:block; height:22px; padding:3px; color:#000; font:normal 11px/20px verdana, sans-serif; text-decoration:none; text-indent:10px; border:2px solid #09c; border-width:0 2px; } dl.dscss3menu a.last { border-width:0 2px 2px 2px; } dl.dscss3menu a b { display:block; background:#999; border:1px solid #333; border-color:#eee #333 #333 #eee; font-weight:normal; } dl.dscss3menu a:visited {color:#000;} dl.dscss3menu dt { float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;} dl.dscss3menu dd { float:left; padding:0; margin:0; position:relative; z-index:10;} dl.dscss3menu dt a {width:90px;} dl.dscss3menu dd a {background:#09c; width:176px;} dl.dscss3menu dt a:hover, dl.dscss3menu dt a:focus, dl.dscss3menu dt a:active, dl.dscss3menu dd a:hover, dl.dscss3menu dd a:focus, dl.dscss3menu dd a:active { margin-right:1px; background:#30c0f0; color:#fff; } dl.dscss3menu dt a:hover b, dl.dscss3menu dt a:focus b, dl.dscss3menu dt a:active b, dl.dscss3menu dd a:hover b, dl.dscss3menu dd a:focus b, dl.dscss3menu dd a:active b {background:#aaa;} </style> <div id="bazablock"> <div id="optimalhead"> <dl class="dscss3menu"> <dt> <a href="#"><b>Главная</b></a> </dt> </dl> <dl class="dscss3menu"> <dt> <a href="#"><b>Форум</b></a> </dt> <dd> <a href="#"><b>Новые темы</b></a> <a href="#"><b>Новые комментарии</b></a> <a href="#"><b>Изготовление</b></a> <a href="#"><b>Упраление</b></a> <a class="last" href="#"><b>Применение</b></a> </dd> </dl> <dl class="dscss3menu"> <dt> <a href="#"><b>ZORNET.RU</b></a> </dt> <dd> <a href="#"><b>Основные свойства</b></a> <a href="#"><b>Популярные свойства</b></a> <a href="#"><b>Новые свойства</b></a> <a href="#"><b>ZORNET.RU</b></a> <a class="last" href="#"><b>Оригинальные свойства</b></a> </dd> </dl> <dl class="dscss3menu"> <dt> <a href="#"><b>ZORNET.RU</b></a> </dt> <dd> <a href="#"><b>Основные задачи</b></a> <a href="http://zornet.ru/_ld/44/7681.jpg"><b>Скрипты</b></a> <a href="http://zornet.ru/_fr/32/8573576.png"><b>Комментируемые </b></a> <a class="last" href="http://zornet.ru/_ld/007681.jpg"><b>Оригинальные</b></a> </dd> </dl> <dl class="dscss3menu"> <dt> <a href="#"><b>ZORNET.RU</b></a> </dt> <dd> <a href="#"><b>Новые </b></a> <a href="#"><b>Популярные </b></a> <a class="last" href="#"><b>Комментарии </b></a> </dd> </dl> </div> </div> | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
