» »

Выпадающее меню сайта - горизонтальное


Выпадающее  меню сайта - горизонтальное

С начало посмотрел на это меню, ну да простое, но что то подсказало проверить его. Лучше простое но чтоб рабочее полностью было. Когда поставил оно мне очень понравилось. По своему дизайну и фактура у меню красивая. Просто сами блоки лежат на синем форе. Разделы по цвету серые с темна и поверх стильно сделана светлая полоса. Когда наводишь на раздел то светлеет все и что главное все отчетливо видно. Можно просто поместить к примеру несколько тематик на его и у каждой темы будит плавно выезжать под меню где пользователь может спокойно найти что искал. А это как говорил самое главное на сайте. Чтоб было все работающее и найти все было не сложно. Все для того чтоб гости регистрировались и им было комфортно. Забыл сказать что код идет с 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>
24.08.2013 Просмотров: 1271 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
avatar
Elt3850 24.09.2013 05:091
0
не красивое
Kosten
Kosten 24.09.2013 16:492
0
Кому как.
avatar