Панель навигаций

автор Samuel Ноябрь 26th 2011, 17:12

Добрый день.
Хочу поставить себе вот такую навигацию панельку на хтмл-странице. Подскажите код, пожалуйста!

автор **Dana Domirani** Декабрь 1st 2011, 19:17

Живо демо: http://admintalk.forum2x2.ru/h2-page

Сборка:
1. На html-страницу добавить код меню:

Код:: <ul id="menu_p"> <li><a href="#">Главная</a></li> <li><a href="#">Администрация</a></li> <li> <a href="">Форум</a> <ul> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> <li><a href="#">Пункт 4</a></li> </ul> </li> <li><a href="#">Донта</a></li> </ul>

и сохранить. Заменить значки # на ссылки!
Пункты можно переименовывать / добавлять / менять местами в рамках списка.

2. В CSS добавить:

Код:: #menu_p, #menu_p ul { margin: 0; padding: 0; list-style: none; } #menu_p { width: 960px; margin: 2px auto; border: 1px solid #222; background-color: #111; } #menu_p:before, #menu_p:after { content: ""; display: table; } #menu_p:after { clear: both; } #menu_p { zoom:1; } #menu_p li { float: left; border-right: 1px solid #222; -moz-box-shadow: 1px 0 0 #444; -webkit-box-shadow: 1px 0 0 #444; box-shadow: 1px 0 0 #444; position: relative; } #menu_p a { float: left; padding: 12px 30px; color: #999; text-transform: uppercase; font: bold 12px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; outline: none; } #menu_p li:hover > a { color: #00CED1; } *html #menu_p li a:hover { color: #00CED1; } #menu_p ul { margin: 20px 0 0 0; _margin: 0; /*IE6 only*/ opacity: 0; visibility: hidden; position: absolute; top: 38px; left: 0; z-index: 9999; background: #444; -moz-box-shadow: 0 -1px rgba(255,255,255,.3); -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 -1px 0 rgba(255,255,255,.3); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #menu_p li:hover > ul { opacity: 1; visibility: visible; margin: 0; } #menu_p ul ul { top: 0; left: 150px; margin: 0 0 0 20px; _margin: 0; /*IE6 only*/ -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3); -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3); box-shadow: -1px 0 0 rgba(255,255,255,.3); } #menu_p ul li { float: none; display: block; border: 0; _line-height: 0; /*IE6 only*/ -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666; -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666; box-shadow: 0 1px 0 #111, 0 2px 0 #666; } #menu_p ul li:last-child { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } #menu_p ul a { padding: 10px; width: 130px; _height: 10px; /*IE6 only*/ display: block; white-space: nowrap; float: none; text-transform: none; outline: none; } #menu_p ul a:hover { background-color: #111; }

и сохранить.

Панель навигаций

Панель навигаций

Re: Панель навигаций