Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.07.2012, 13:13   #1
RelaX Inc.
Пользователь
 
Регистрация: 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>
CSS:
Код 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;
    }
/* МЕНЮ - КОНЕЦ */
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 13:32   #2
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Может быть можно внутри <li></li> создать отдельный список и задать ему display: none; position: absolute; задать позицию правее главного меню, а для :hover задать display: block;
serken вне форума Ответить с цитированием
Старый 08.07.2012, 13:38   #3
RelaX Inc.
Пользователь
 
Регистрация: 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>
Но как это реализовать с помощью CSS я не знаю...
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 13:54   #4
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

Подскажет кто, как реализовать эту идею с помощью CSS?
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 14:04   #5
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Я как раз правильно говорил


HTML
Код HTML:
<ul>
       <li>Первый пункт</li>
       <li class="touch">Второй пункт
            <ul>
                  <li class="hide">Подпункт</li>
            </ul>
        </li>
</ul>
CSS
Код 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>
serken вне форума Ответить с цитированием
Старый 08.07.2012, 14:07   #6
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Но это далеко не конечный код, ведь .hide{position: absolute;} отсчёт идёт от краёв документа, поскольку у родительского элемента не задана position
Так же у ul не задана ширина и при отсутствии родителя она будет занимать всю ширину экрана.

Последний раз редактировалось serken; 08.07.2012 в 14:08. Причина: Ошибка в цветах
serken вне форума Ответить с цитированием
Старый 08.07.2012, 14:16   #7
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

Про position понял, а про ul - нет. Вы про то что первое меню(главное) будет занимать всю ширину экрана? Или выпадающая часть?
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 14:20   #8
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

И что то у меня не получается никакого выпада с вашими строками... Просто беспорядочное положение ссылок меню...
RelaX Inc. вне форума Ответить с цитированием
Старый 08.07.2012, 14:35   #9
serken
Новичок
Джуниор
 
Регистрация: 08.07.2012
Сообщений: 12
По умолчанию

Для начала, "выпадающий" это без анимации ?
И выпадающий с боку от основного меню?
Хотя, код, который я написал рабочий, но вот более-менее готовый

HTML
Код HTML:
<ul>
       <li>Первый пункт</li>
       <li class="touch">Второй пункт
            <ul class="hide">
                  <li>Первый Подпункт</li>
                  <li>Второй Подпункт</li>
                  <li>Третий Подпункт</li>
            </ul>
        </li>
</ul>
CSS
Код 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;}
serken вне форума Ответить с цитированием
Старый 08.07.2012, 15:11   #10
RelaX Inc.
Пользователь
 
Регистрация: 15.01.2012
Сообщений: 52
По умолчанию

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

Последний раз редактировалось RelaX Inc.; 08.07.2012 в 15:17.
RelaX Inc. вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающее меню 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