Последние обновления

Делаем стильную менюшку


Описание темы отсутсвует
Тема создана:
Ответов: 0
Просмотров: 300
Последний ответ:
Destroy
Администратор
131 7 0

Напишем с вами красивую горизонтальную менюшка для сайта?Используя списки?
Да, напомню вам что списки блочные элементы.А блочные элементы занимают всю
ширину,а каждый блочный элемент двигает последующий вниз.

То есть:

<div>я первый</div>
<div>я второй</div>

Распологаться они будут друг под другом.

Так напишем первый листинг, допустим в нашей менюшке три ссылки:

<ul id="menu">
<li class="link"><a href="#">Ссылка</a></li>
<li class="link"><a href="#">Ссылка</a></li>
<li class="link"><a href="#">Ссылка</a></li>
</ul>

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

<style type='text/css'>
li{list-style:none;}
</style>

От макеров избавились. Теперь мы то хотели горизонтальную менюшку.Обратимся к display

Отредактируем наши стили, будем стильными:

<style type='text/css'>
li{list-style:none;display:inline;}
</style>

Да, мы сделали наш блочный элемент inline элементом.

Теперь давайте наведем красоту ссылкам. Я люблю несколько темные цвета, но уже на ваш выбор:

<style type='text/css'>
li{list-style:none;display:inline;}
li a{background:#101010;color:#fafafa;text-decoration:none;padding:6px}
</style>

Так меняем цвет при наведении и добавляем рамочку просто так):

<style type='text/css'>
li{list-style:none;display:inline;}
li a{background:#101010;color:#fafafa;text-decoration:none;padding:6px}
li a:hover{background:#033a77;color:#fff;text-decoration:none;padding:6px;}
</style>
Зарегистрируйтесь или авторизуйтесь что бы писать