Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Делаем горизонтальное меню

Итак задача поставлена давайте приступим к её реализации на практике, вот что у нас получится в итоге:

Исходник

Достаточно хорошее меню которое можно применить к большинству сайтов к тому же есть даже эффект замены цвета при наведении мышью очень удобно и красиво. Здесь в основном будет CSS, а html собственно очень мало. Итак давайте будем разбираться поэтапно я постараюсь объяснить все максимально доступно. Для начала давайте посмотрим html каркас того что получилось:

<div id="menu">
<ul>
<li class="mn"><a href="#">Главная</a></li>
<li class="mn"><a href="#">Новости</a></li>
<li class="mn"><a href="#">Софт</a></li>
<li class="mn"><a href="#">О проекте</a></li>
</ul>
</div>

Как видите сложного здесь ничего нет, обычный блок наполненный, списком с ссылками, для тех кто не знает какие здесь применены теги можете прочитать урок «CSS меню вертикальное» там этот каркас подробно описан. Далее давайте будем разбирать каждый пункт CSS кода поскольку в нем и зарыта вся суть.

#menu {
width: 100%;
background-image: url(bg.jpg);
height:20px;
margin: 0px;
}

Здесь мы создали идентификатор для нашего блока и назвали его menu и присвоили ему следующие параметры width: 100%; ширина в процентах, background-image: url(bg.jpg); фоновое изображение которое у нас будет в меню, его вы найдете в файле attache, height:20px; высота блока в пикселях, и обнулили отступы margin: 0px; чтобы не превысить высоту в 20 пикселей иначе фон начнет дублироваться вертикально и весь вид не испортился.

#menu ul {
list-style:none;
padding: 0px;
margin:0px;
}

Теперь для тега <ul> мы убираем точки в меню list-style:none;, и опять убираем все возможные отступы padding: 0px; margin:0px;

#menu li a {
color: #fff;
text-decoration:none;
}

Переходим к пунктам <li> и конкретно когда они будут в гиперссылке, мы задаем цвет текста color: #fff;, поскольку когда текст становится гиперссылкой он меняет свой цвет, так же убираем подчеркивание text-decoration:none; которое так же проявляется при появлении гиперссылки.

#menu li{
float:left;
width: 100px;
font-size:12px;
height: 20px;
text-align:center;
border-right: 1px solid #fff;
}

Этот пункт самый важный, хотя неважного здесь вообще ничего нет :) Мы задаем параметры каждому пункту меню <li>, сперва нам необходимо сделать выравнивание чтобы наше меню стало горизонтальным, а не вертикальным, в этом нам поможет параметр float:left; который прижимает все пункты меню к левому краю, затем мы делаем ширину width: 100px; высоту height: 20px; и размер шрифта font-size:12px;, теперь выравниваем текст по центру text-align: center; и последнее что нам осталось это мы делаем обводку <li> т.е. пункта меню, справа линией толщиной 1 пиксель и белым цветом border-right: 1px solid #fff;.

#menu li:hover {
color:#000000;
background-image:url(bg-li.jpg);
height: 20px;
}

И последнее нам осталось добавить эффект замены фона при наведении мышью на пункт меню, для этого мы присваиваем значение li:hover и прописываем следующие параметры, цвет текста черный color:#000000; поскольку фон изменится а черный цвет на новом фоне будет лучше виден, далее мы присваиваем новый фон background-image:url(bg-li.jpg); и опять таки выдерживаем высоту height: 20px; ну вот и все.

Этот пример горизонтального меню очень простой, но при этом очень эффективный и часто применяемый на практике, так что можете брать на вооружение и пользоваться… Я искренне надеюсь что этот урок принесет вам практическую пользу и теперь вы будете знать как сделать горизонтальное меню.

Дата публикации:2010-10-01


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget