Помощник
|
Красивое горизонтальное меню |
shannon1791
|
Сообщение
#1
|
|||
|
|
|||
|
||||
Aman_sf |
9.4.2012, 20:10;
Ответить: Aman_sf
Сообщение
#2
|
|
Вставьте все свои темы тута сразу. Ну кому это может понадобиться? Ведь в поиске можно найти быстро.
|
|
|
shannon1791
|
Сообщение
#3
|
|
(Aman) Вставьте все свои темы тута сразу. Ну кому это может понадобиться? Ведь в поиске можно найти быстро. это мне всегда "правка" нажимать и добавлять? я конечно могу, но потом тут много всего будет:) |
|
|
AdminPC |
15.4.2012, 13:44;
Ответить: AdminPC
Сообщение
#4
|
|
Вот смотрите пример горизонтального меню с выпадающим списком
<title>Создание красивого горизонтального CSS меню для сайта</title> </head> <body> <div id="css-menu"> <ul> <li><a href="#"> <span class="text-top">Главная</span> <span class="text-bottom">О нашем проекте</span> </a></li> <li><a href="#"> <span class="text-top">Справочник</span> <span class="text-bottom">CSS справочник</span> </a></li> <li><a href="#"> <span class="text-top">CSS уроки</span> <span class="text-bottom">Для начинающих</span> </a></li> <li><a href="#"> <span class="text-top">CSS меню</span> <span class="text-bottom">Коллекция CSS меню</span> </a></li> </ul> </div> Таблица стилей для меню будет выглядеть так #css-menu ul {
list-style: none; font-family: Georgia, serif; font-size: 18px; font-style: italic; line-height: 1.4em; border:2px solid #000000; border-left: 1px solid #000000; float: left; padding: 0; margin: 12px 0 25px 24px } #css-menu ul li { float: left } #css-menu ul li a { display: block; text-decoration: none; background-color: #595959; padding: 5px 10px 0 10px; color: #fefefe; width: 120px; border-right: 1px solid #797979; border-left: 1px solid #191919 } #css-menu ul li a span { display: block } #css-menu ul li a span.text-top { border-bottom: 1px solid #595959 } #css-menu ul li a:hover span.text-top { border-bottom: 1px dashed #fefefe; color: #ffddbb } #css-menu ul li a span.text-bottom { visibility: hidden; font-size: 11px; text-align: right } #css-menu ul li a:hover span.text-bottom { visibility: visible } |
|
|
shannon1791
|
Сообщение
#5
|
|
|
могли бы хотя-бы оформить красиво ;) и можно скриншот пожалуйста?
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Перенести меню | 1 | Викторио_mw | 1467 | 28.8.2018, 0:10 автор: TimurR |
|
Необходимо разрезать и установить Меню для группы ВКонтакте | 2 | boltuk | 3411 | 4.12.2017, 14:44 автор: tezoro |
|
Помогите с меню - переделать в выпадающее | 1 | lepota | 1130 | 4.12.2017, 13:29 автор: yury_mw |
|
Слайдер под меню | 0 | Olya_Poy | 4645 | 29.11.2017, 11:09 автор: -garmoni- |
|
На разных разрешениях меню выглядит по разному | 0 | SPiar | 4817 | 28.9.2017, 17:45 автор: -korotkov- |
Текстовая версия | Сейчас: 20.4.2024, 13:34 |