Глянцевое горизонтальное меню

В этом уроке мы будем делать красивое, блестящее горизонтальное меню.

Пример этого меню можно посмотреть здесь.

Для создания внешнего вида используется 3 картинки: нижняя подчеркивающая и повторяющаяся градиентная картинка, а также правая и левая часть порезанной картинки для отображения выделенной вкладки. Вашему вниманию представлено 5 разных цветовых схем:

Цветовые схемы и картинки для меню:

Скачать архив с изображениями.

Для реализации этого меню Вам понадобятся два куска кода - CSS и HTML.

CSS: (вставьте его в свою таблицу стилей или между тэгами <head></head>, заключив в тэги <style></style>)


/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(lessons/080309glossycss/menur_bg.gif) repeat-x; /*путь к картинке заднего фона*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer; 
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Расстояние между элементами меню*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(lessons/080309glossycss/menur_hover_left.gif) no-repeat; /*путь к левой картинке*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(lessons/080309glossycss/menur_hover_right.gif) no-repeat right top; /*путь к правой картинке*/
}

HTML: (вставьте его в то место страницы, где у Вас будет меню)

 <ul class="glossymenu">
<li class="current"><a href="http://www.dynamicdrive.com/"><b>Home</b></a></li>
<li><a href="http://www.dynamicdrive.com/style/"><b>CSS</b></a></li>
<li><a href="http://www.dynamicdrive.com/forums/"><b>Forums</b></a></li> 
<li><a href="http://tools.dynamicdrive.com"><b>Webmaster Tools</b></a></li> 
<li><a href="http://www.javascriptkit.com/"><b>JavaScript</b></a></li> 
<li><a href="http://www.cssdrive.com"><b>Gallery</b></a></li> 
</ul>

Не забудьте в css стилях поменять пути до картинок.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dynamicdrive.com
Перевел: Максим Шкурупий
Урок создан: 8 Марта 2009
Просмотров: 73121
Правила перепечатки

5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 8 Марта 2009 17:48
    Дмитрий
    Спасибо большое!!! Красивое меню! Сделаю на своём сайте такое же. Кстати, как реализовать регистрацию на PHP?
  • 8 Марта 2009 18:17
    Дмитрий
    Но у меня почему-то на всех страницах выделяется главная:-(
  • 8 Марта 2009 19:43
    Максим
    Для того, чтоб на каждой странице выделялись разные ссылки необходимо переставлять "class="current"" в необходимое место.
    • 5 Сентября 2011 19:27
      Bandyy
      Хелп :)
  • 9 Марта 2009 00:53
    Дмитрий
    Евгений, выложите пожалуста урок как создать регистрацию на своём сайте
  • 9 Марта 2009 08:03
    dima
    Дмитрий +1. ага очень интересно))) Будем рады!
  • 9 Марта 2009 15:40
    AHTOH
    А куда вставлять class="current"?
  • 9 Марта 2009 17:34
    dima
    AHTOH, это реализуется на php через условие. назначается определенный класс для ссылки в зависимости от выбранного раздела. пиши мыло или асю, я вышлю код.
    • 5 Сентября 2011 19:27
      Bandyy
      хелп
  • 9 Марта 2009 18:06
    AHTOH
    to dima: ася 474-128-072
  • 9 Марта 2009 20:52
    dima
    AHTOH ок отправил))) кстати, почему тут постоянно авторизация слетает((( видно на сессии реализована. зы:куки включены)
  • 12 Марта 2009 23:54
    Стас
    м...интересно но чот у меня не выходит....=( как то оно криво отображается.......=(
  • 14 Марта 2009 20:17
    Дмитрий
    Не знаю, но у меня всё получилось
  • 17 Марта 2009 22:09
    barometre
    Блин а я не хочу чтобы у меня в HTML присутствовали элементы кода CCS. как мне сделать так чтобы css код был в css-таблице а html-код там где он должен быть...????
  • 18 Марта 2009 14:40
    krokodild
    Блин у меня тоже главная всегда выделена, когда переходиш на страницы. Народ вышлите мне тоже скрипт который меняет class="current" на ссылках. Ася: 388 523 964
  • 19 Марта 2009 00:40
    barometre
    Евгений сделайте пожалуйста видео-урок о том как создавать такие меню...) а то просто копировать не интересно
  • 25 Марта 2009 10:53
    XaLeX
    Один минус этого меню!!! В Internet Explorer 7, меню отображается по диоганали экрана. В Opera, Firefox и IE8 - все ОК! Будем рады кускам кода CSS под IE7!!!
  • 29 Марта 2009 01:14
    Andrew
    Если не сложно можно и мне прислать скрипт который меняет class="current" Ася:243444945
  • 26 Апреля 2009 05:16
    Amit
    dima, может можно и на это мыло amitaus007[ну, вы в курсе]yandex.ru получить код для работы с class="current" ?
  • 7 Мая 2009 15:36
    bighaired
    Если не сложно и мне скинуть на newtokk@gmail.com или на асю - 275049286
  • 6 Августа 2009 16:08
    linkan
    dima, может можно и на это мыло andreykonst[ну, вы в курсе]mail.ru получить код для работы с class="current" ?
  • 9 Октября 2009 00:59
    andrei
    Вот код: ?php if (isset($n)) {if ($n==1) echo "class='current'";}?
  • 31 Октября 2009 18:16
    space
    Автор: andrei (2009-10-09 00:59:03) Вот код: ?php if (isset($n)) {if ($n==1) echo "class='current'";}? А куда воткнуть эт код???Так чет и не понял!!!???
  • 15 Ноября 2009 17:54
    space
    Тут вообще есть кто-нибудь соображающий или вы только можете тексты с чужих сайтов переводить???!!!
  • 3 Декабря 2009 16:49
    sashassop
    активно тока пункт меню на первой странице, дальше после перехода главная так и остается активной. Что сделать? Куда всунуть код?
  • 18 Мая 2010 17:30
    nikitow
    скажите чайнику куда вставлять if (isset($n)) {if ($n==1) echo "class='current'";}?
  • 18 Мая 2010 18:00
    nikitow
    можно код для IE7
  • 5 Сентября 2011 19:27
    Bandyy
    Народ, подскажите как сделать что бы выделялась открытая ссылка? Очень нужно, ответа так и не нашел :)
  • 5 Ноября 2011 14:39
    lola_theone
    Зачем усложнять себе жизнь скриптами всякими? Для того чтобы при переходе активной ссылке присваивалось значение current просто в коде нтмл в самом меню присваиваем ссылке класс current. Например: для страницы index присваиваем значение ссылке на страницу index <li class="current"><a href="index.html">Главная</a></li> на странице about присваиваем значение ссылке <li class="current" ><a href="about.html">Обо мне</a></li> С другими аналогично!!!!! Удачи!!!
  • 3 Апреля 2012 16:34
    aidakaev
    а как сделать чтобы кнопки были по центру?
  • 4 Мая 2012 20:25
    dilexerit
    а что делать если идёт перенос на следующую строку?у меня текст за пределы меню выходит(((
  • 8 Января 2015 22:07
    sshima
    почему у меня получается только вертикально и без картинок (хотя путь к картинкам я прописал) Тестирую на денвере
^ Наверх ^