» »

Меню для светлых сайтов любого формата


Отличное меню. Возможно не очень красиво, но изменить все меню под себя очень легко.
Сам код не большой, состоит из двух частей:
CSS кода конечно и html.


Ну что же, начнем устанавливать:
1.Нам требуется вставить данный код в CSS:
Код
  
.block_one {width:300px;background:#f5f5f5;margin-bottom:20px;border:1px solid #dedede;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}  
.block_header {text-transform:uppercase;padding-bottom:4px;color:#8e8e8e;font-size:17px; text-align:center;}  
.block_header_menu {padding:20px;padding-bottom:4px;}  
.menu, .menu li {margin:0px;padding:0px;list-style-type:none}  
.menu {margin-bottom:15px !important}  
.menu li a {padding:5px 20px;display:block;text-decoration:none;font-size:13px;color:#8B8878}  
.menu li a:hover {color:#fff;background:#79B2D2}  
.menu_bottom_link a {border-bottom:0px !important}  
.hr {border: 1px solid #000;}  

А вот html в нужно вам место:
Код
  
<div class="block_one">  
<div class="block_header block_header_menu">Разделы</div>  
<div class="hr"></div>  
<nav>  
<ul class="menu">  
<li class="utemplate"><a href="#"><b>Премиум шаблоны</b></a></li>  
<li><a href="/loadl/7">Ваш текст</a></li>  
<li><a href="/load/6">Ваш текст</a></li>  
<li><a href="/load/5">Ваш текст</a></li>  
<li><a href="/load/4">Ваш текст</a></li>  
<li><a href="/load/3">РВаш текст</a></li>  
<li><a href="/load/2">Ваш текст</a></li>  
<li><a href="/load/1">Блог</a></li>  
<li class="menu_bottom_link"><a href="/forum"><b>Форум</b></a></li>  
</ul>  
</nav>  
</div>  


Ну что же, теперь немного разберем сам код.
Эти коды отвечают за саму таблицу.
Код
  
.block_one {width:300px;background:#f5f5f5;margin-bottom:20px;border:1px solid #dedede;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px}  
.block_header {text-transform:uppercase;padding-bottom:4px;color:#8e8e8e;font-size:17px; text-align:center;}  
.block_header_menu {padding:20px;padding-bottom:4px;}  

Этот код за меню в том числе при наводке:
Код
  
.menu, .menu li {margin:0px;padding:0px;list-style-type:none}  
.menu {margin-bottom:15px !important}  
.menu li a {padding:5px 20px;display:block;text-decoration:none;font-size:13px;color:#8B8878}  
.menu li a:hover {color:#fff;background:#79B2D2}  
.menu_bottom_link a {border-bottom:0px !important}  

Подсказка: hover -при наводке.
А этот код за линию ниже "Разделы":
Код
  
.hr {border: 1px solid #000;}  


Автор данного меню - http://weberat.ru
(Kosten, Обратная ссылка обяз.)

Это DEMO можно посмотреть на меню _http://weberat.ru/ot_nas/sveltoe_menu.html
28.11.2014 Просмотров: 851 Комментарий: (10)

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

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

Комментарий: 9
DeadMoras
DeadMoras 28.11.2014 22:301
0
Скриншот в плохом качестве, ибо у меня ноут слабый sad
Kosten
Kosten 28.11.2014 22:352
0
DeadMoras, отличный скрин, кому нужно тот разглядит.
DeadMoras
DeadMoras 28.11.2014 23:223
0
Kosten, добавь демо " http://weberat.ru/ot_nas/sveltoe_menu.html "
Kosten
Kosten 29.11.2014 02:514
0
DeadMoras, добавил, думаю со стилями поиграться и другой оттенок цвета можно получить.
Dimstrik
Dimstrik 29.11.2014 21:065
0
DeadMoras, Ты с начало научись сам ссылки на источник ставить потом пиши свои!
Kosten, А я бы его ссылки удалил так как он с этого сайта берёт а ссылки не ставит !
Kosten
Kosten 29.11.2014 21:146
0
Dimstrik, да ладно, что из за ссылки тут тему мутить, она мне не мешает.
DeadMoras
DeadMoras 30.11.2014 00:417
0
Dimstrik, даун, я делал это меню, а тут все с интернета.
Dimstrik
Dimstrik 30.11.2014 00:518
0
DeadMoras, Ты бы за речью следил !
Привыкли что на растояние и перед монитором петушитесь
DeadMoras
DeadMoras 30.11.2014 01:599
0
Dimstrik, хехе...
avatar