» »

Горизонтальное меню Asterga на CSS3


Горизонтальное меню Asterga на CSS3

Еще очень не плохо создано горизонтальное меню работающее на CSS3 под названием Asterga, где подойдет на любую тему. Просто как фактура и оттенок разный позволяет это сделать.

Код
<style>
#menu {list-style-type:none; margin:30px 0 auto 0px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li:hover, #menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:20px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65 url(http://delaisait.ucoz.ru/script/menu/img/1/bottom.gif) no-repeat bottom left; text-align:center; cursor:pointer;}
#menu dt {margin:0; padding: 5px; font-size: 1.1em; color: #fff; border-bottom:1px solid #444;}
#menu .one {background: #b2ab9b url(http://delaisait.ucoz.ru/script/menu/img/1/top.gif) no-repeat top left;}
#menu .two {background: #949e7c url(http://delaisait.ucoz.ru/script/menu/img/1/top.gif) no-repeat top left;}
#menu .three {background: #d4d8bd url(http://delaisait.ucoz.ru/script/menu/img/1/top.gif) no-repeat top left;}
#menu .four {background: #e2dfa8 url(http://delaisait.ucoz.ru/script/menu/img/1/top.gif) no-repeat top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; background: #47a; text-align:left;}
#menu dd.last {border-bottom:1px solid #444;}
.gallery dt a, .gallery dt a:visited {display:block; color:#444;}
.gallery dd a, .gallery dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px;
background: #47a url(http://delaisait.ucoz.ru/script/menu/img/1/arrowr.gif) no-repeat 10px 10px; width:125px;
}
.gallery dd a:hover {background: #258 url(http://delaisait.ucoz.ru/script/menu/img/1/arrowr.gif) no-repeat 11px 10px; color:#9cf;}
</style>
<ul id="menu">
<li>
<dl class="gallery">
<dt class="one"><a href="#">СКРИПТЫ</a></dt>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd class="last"><a href="#" title="Описание">Пункт меню</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="two"><a href="#">ФОНЫ</a></dt>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd class="last"><a href="#" title="Описание">Пункт меню</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="three"><a href="#">СВОЙСТВА</a></dt>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd class="last"><a href="#" title="Описание">Пункт меню</a></dd>
</dl>
</li>
<li>
<dl class="gallery">
<dt class="four"><a href="#">ТЕГИ</a></dt>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd><a href="#" title="Описание">Пункт меню</a></dd>
<dd class="last"><a href="#" title="Описание">Пункт меню</a></dd>
</dl>
</li>
</ul>
24.02.2016 Просмотров: 598 Комментарий: (5)

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

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

Комментарий: 4
tsakonter
tsakonter 25.02.2016 00:291
0
Это думаю просто доработанное, просто есть точно такое, только темное, но только без под меню разделов.
Tergran
Tergran 25.02.2016 00:332
0
Нет это не какая не переделка, просто они похоже по своей форме, это просто еще в несколько цветов идет.
AnTron
AnTron 25.02.2016 00:383
0
Но сейчас много что доделывают по дизайн, но мне тоже кажется, что такое меню изначально было.
Kosten
Kosten 25.02.2016 00:414
0
Постараюсь сделать демонстрацию как время будет, просто на такие скрипты не сложно делать.
avatar