Приветствую Вас на моем блоге! В этот раз моей целью было сделать красивое css меню для сайта и тем самым упростить жизнь других веб-мастеров
И так, я хочу представить вашему вниманию несколько горизонтальное css меню:
1.Горизонтальное CSS меню
HTML
<div id="menu"> <a href="#" id="active">Главная</a> · <a href="#">О прокте</a> · <a href="#" >Наш сервис</a> · <a href="#">Портфолио</a> · <a href="#">Магазин</a> · <a href="#">Контакты</a> </div>
CSS
#menu { background: url("sprite_bg.png") repeat-x scroll left top #252525; border: 1px solid #D5D5D5; border-radius: 10px; box-shadow: 0 5px 5px -4px #000000; color: #ffffff; text-indent:5px; padding: 9px 0; display:inline-block; } #menu a { outline: none; padding: 9px 7px; font-size: 16px; color: #A4A4A4; font-style: normal; font-variant: normal; font-weight: 400; line-height: normal; text-decoration: none; } #menu a:hover { color:#FFF; text-decoration:underline; } #active{ background: url("images/sprite_bg.png") repeat-x scroll left top #252525; background-position: 0 -50px; color:#FFF !important; }
2.Горизонтальное CSS меню
HTML
<div id="menu2"> <a href="#" id="active2">Главная</a><a href="#">О прокте</a><a href="#" >Наш сервис</a><a href="#">Портфолио</a><a href="#">Магазин</a><a href="#">Контакты</a> </div>
CSS
#menu2 { font-size: 0.85em; height:3.2em; color: #000; text-align:center; display:inline-block; } #menu2 div { width:44em; margin: 0 auto; } #menu2 #active2 { float:left; color: #999; background-color: #000; } #menu2 a { display:block; float:left; color: #e8e8e8; background-color: #232323; text-align:center; padding: 10px 18px; text-decoration: none; } #menu2 a:hover { color: #ccc; background-color: #000; border-top: 2px outset #e8e8e8; border-bottom: 2px outset #e8e8e8; padding-bottom: 6px; }
3.Горизонтальное CSS меню
HTML
<div id="menu3"> <a href="#">Главная</a><a href="#">О прокте</a><a href="#" >Наш сервис</a><a href="#">Портфолио</a><a href="#">Магазин</a><a href="#">Контакты</a> </div>
CSS
#menu3 { background-color: #131313; border-bottom: 1px solid #131313; clear: both; color: #000000; font-size: 80%; font-weight: bolder; height: 3em; margin-top: 7px; display:inline-block; } #menu3 a { border-top: 3px dashed #777777; color: #E9E9E9; display: block; float: left; margin-right: 15px; padding: 7px 10px; text-decoration: none; } #menu3 a:hover { background-color: #777777; border-color: #990000 #BBBBBB #BBBBBB; border-right: 1px dashed #BBBBBB; border-style: dashed; border-width: 3px 1px 1px; color: #EEEEEE; padding: 7px 9px; }
Получайте новые статьи блога прямо себе на почту