|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
08.07.2012, 13:13 | #1 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Выпадающее горизонтальное меню только на CSS
Я бы хотел сделать выпадающее горизонтальное меню только на HTML + CSS. Само горизонтальное меню я сделал. Но к нему нужно выпадающее окно, чтобы там были категории. Расскажите мне пожалуйста как сделать и желательно с примерами. И притом желательно не изменять данный CSS код, а только к нему добавить.
HTML: Код HTML:
<div id="menu"> <ul> <li><a href="/">Новости</a></li> <li><a href="/forum/">Форум</a></li> <li><a href="/load/">Загрузки</a></li> <li><a href="/ships/">Корабли</a></li> <li><a href="/video/">Видео</a></li> <li><a href="/images/">Изображения</a></li> <li><a href="/stories/">Истории</a></li> <li><a href="./index.php?do=feedback">Связь с администрацией</a></li> </ul> </div> Код HTML:
/* МЕНЮ - НАЧАЛО */ * {margin: 0; padding: 0; text-align: center;} #menu ul { font-family: Times New Roman; font-size: 16px; border-bottom:2px solid #FFFFFF; border-top:2px solid #FFFFFF; margin-left:0; padding:10px; height:20px; margin-top: 25px; background: url('bg.png'); -webkit-box-shadow: 0px 0px 50px #000000; /* Safari, Chrome */ -moz-box-shadow: 0px 0px 50px #000000; /* Firefox */ box-shadow: 0px 0px 50px #000000 } #menu ul li { display: inline; /* ПУНКТЫ В ЛИНИЮ */ } #menu ul li a { /* создаём прямоугольники для пунтов меню и регулируем растояние букв от их границ */ text-decoration:none; margin-left:20px; padding: 3px 4px; } #menu ul li a:link { /* цвет непосещённых */ color:#bad7fc; } #menu ul li a:visited { /* цвет посещённых */ color:#bad7fc; } #menu ul li a:hover { /* при наведении указателя мыши */ color:#84bbff; border-bottom: 1px solid #84bbff; } #menu ul li a#nowopen { /* сейчас настроим как будет выглядеть вкладка текущей страницы это зависит от того, кокому элементу меню передан id="nowopen" */ border-bottom: 1px solid #bad7fc; } /* МЕНЮ - КОНЕЦ */ |
08.07.2012, 13:32 | #2 |
Новичок
Джуниор
Регистрация: 08.07.2012
Сообщений: 12
|
Может быть можно внутри <li></li> создать отдельный список и задать ему display: none; position: absolute; задать позицию правее главного меню, а для :hover задать display: block;
|
08.07.2012, 13:38 | #3 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
serken, я думаю не получится внутри <li> и </li>. Может быть только между соседними <li> создать второй <ul> и в нем <li>. Вот типа такого:
Код HTML:
<ul> <li>1</li> <li>2</li> <ul> <li>2.1</li> <li>2.2</li> </ul> <li>3</li> </ul> |
08.07.2012, 13:54 | #4 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Подскажет кто, как реализовать эту идею с помощью CSS?
|
08.07.2012, 14:04 | #5 |
Новичок
Джуниор
Регистрация: 08.07.2012
Сообщений: 12
|
Я как раз правильно говорил
HTML Код HTML:
<ul> <li>Первый пункт</li> <li class="touch">Второй пункт <ul> <li class="hide">Подпункт</li> </ul> </li> </ul> Код HTML:
.hide {display: none; position: absolute; top: 10px; left: 100px;} .touch:hover .hide{display: block;} Последний раз редактировалось serken; 08.07.2012 в 14:43. Причина: Исправлен незакрытый код в <li class="hide"><li> |
08.07.2012, 14:07 | #6 |
Новичок
Джуниор
Регистрация: 08.07.2012
Сообщений: 12
|
Но это далеко не конечный код, ведь .hide{position: absolute;} отсчёт идёт от краёв документа, поскольку у родительского элемента не задана position
Так же у ul не задана ширина и при отсутствии родителя она будет занимать всю ширину экрана. Последний раз редактировалось serken; 08.07.2012 в 14:08. Причина: Ошибка в цветах |
08.07.2012, 14:16 | #7 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Про position понял, а про ul - нет. Вы про то что первое меню(главное) будет занимать всю ширину экрана? Или выпадающая часть?
|
08.07.2012, 14:20 | #8 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
И что то у меня не получается никакого выпада с вашими строками... Просто беспорядочное положение ссылок меню...
|
08.07.2012, 14:35 | #9 |
Новичок
Джуниор
Регистрация: 08.07.2012
Сообщений: 12
|
Для начала, "выпадающий" это без анимации ?
И выпадающий с боку от основного меню? Хотя, код, который я написал рабочий, но вот более-менее готовый HTML Код HTML:
<ul> <li>Первый пункт</li> <li class="touch">Второй пункт <ul class="hide"> <li>Первый Подпункт</li> <li>Второй Подпункт</li> <li>Третий Подпункт</li> </ul> </li> </ul> Код HTML:
ul{width: 200px; background: silver; text-align: center;} .hide {display: none; position: absolute; top: 21px; left: 200px; background: red; list-style: none;} .touch:hover .hide{display: block;} |
08.07.2012, 15:11 | #10 |
Пользователь
Регистрация: 15.01.2012
Сообщений: 52
|
Только мне надо горизонтальное меню... Т.е. выпад нужно чтобы был под меню. А вы можете встроить вашу затею в мой код, который я указал в шапке?
С анимацией лучше, но это уже не по теме, так как это js надо, я прав?) А вообще можно и без нее. Последний раз редактировалось RelaX Inc.; 08.07.2012 в 15:17. |
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Выпадающее меню CSS+HTML | Mat-eria | HTML и CSS | 0 | 17.11.2011 17:29 |
Выпадающее горизонтальное меню на css | st_sasha | HTML и CSS | 1 | 20.10.2011 16:26 |
Css-меню вертикальное выпадающее и раскрывающееся при выборе | Landysh86 | HTML и CSS | 3 | 04.05.2011 13:25 |
горизонтальное меню | s.talke.r | Паскаль, Turbo Pascal, PascalABC.NET | 1 | 18.12.2010 17:12 |
Горизонтальное меню на CSS. | yermolenko | HTML и CSS | 2 | 27.05.2010 10:47 |