Ul меню горизонтальное – Горизонтальное меню для сайта на HTML+CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером
07.01.2018 
Советы художника
Горизонтальное меню на CSS
Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.
HTML код меню
<ul> <li><a href="http://sitear.ru">Главная</a></li> <li><a href="http://sitear.ru">Дизайн, CSS</a></li> <li><a href="http://sitear.ru">Программирование</a></li> <li><a href="http://sitear.ru">Еще пункт меню</a></li> </ul>
По html структуре объяснять нечего, простой UL список. Как упоминалось раньше, семантика соблюдается. Семантика – это когда html тег соответствует содержимому. Если разделы меню сделать DIV блоками, это не будет семантикой. Равнозначные элементы должны быть списком. Посмотрим, что у нас получилось на данном этапе:
UL элемент является блочным, поэтому его ширина будет 100% (на всю ширину страницы). LI также блочный элемент, а вот A – не блочный. Убедиться в этом можно с помощью наложения рамки в css стиле блока – border:1px solid #f00; Мне часто приходиться пользоваться этой хитростью, чтобы видеть границы элементов.
CSS код меню
Для придания этому меню горизонтального положения, выравнивания по центру и соответствующего вида, напишем следующий CSS код:
#menu{list-style:none; width:500px; padding:0; margin: auto;}
#menu li{float:left; font:bold 14px Arial;}
#menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:#eee; text-decoration:none;}
#menu a:hover{color:#fff; background:#888;} На данном этапе получилось следующее:
Разбор полетов
Разберем все поэтапно, до каждой мелочи:
#menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu.
list-style:none; – убираем маркеры (пульки), слева от каждого элемента в списке.
width:500px; – ширина меню 500 пикселей.
margin: auto; – выравнивает меню по центру страницы. Если не будет указана ширина, то выравнивания не произойдет, поэтому предыдущий параметр обязателен.
padding:0; – устанавливаем нулевые внутренние отступы. То есть убираем их вообще. Если не знаете что это дает, установите их в 20px и посмотрите, что измениться.
#menu
float:left; – обтекание элемента по левой стороне. Это выражение придает меню горизонтального положения.
font:bold 14px Arial; – устанавливаем стиль для текста в самой короткой форме, bold – жирный текст, 14px – размер шрифта в пикселях, Arial – тип шрифта.
#menu a {…} – присваиваем стили для A элемента (ссылки).
color:#666; – темно-серый цвет шрифта.
display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста.
height:40px; – высота меню будет 40 пикселей.
line-height:36 px; – высота верхней линии над текстом. Это дает возможность задавать вертикальное положение текста внутри блока. Мы используем это для выравнивания текста в вертикальном направлении.
padding:0px 10px 0px 10px; – делаем внутренние отступы слева и справа по 10 пикселей.
background:#eee; – устанавливаем серый цвет фона для элементов меню.
text-decoration:none; – убираем линию подчеркивающую ссылку.
#menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.
color:#fff; – меняем цвет текста на белый.
background:#888; – цвет фона меняем на темно серый.
Доработка горизонтального меню
Это все, что касается основ создания горизонтальных меню на CSS. Далее мы придадим красивый вид нашему меню. Для этого мы присвоим для
background.png —
hover.png —
Теперь меню имеет немного иной вид:
Это самое простое горизонтальное меню на CSS, которое вы можете использовать как основу для разработки меню для своего сайта. Также можете посмотреть как создать выпадающее горизонтальное меню на css. Надеюсь, статья была полезной и понятной. Если остались вопросы или недопонимания по поводу горизонтальных меню, смело пишите в комментарии.
Дальше: Заработок на контекстной рекламе, идеи для эффективного заработка
Дискуссия по теме 31 Комментарий
Добавить комментарий
Ильдар 11.11.2014 в 22:47
Добрый вечер! а как к пунктам меню добавить материал текст фото видео через css и html не используя движок joomla!
Оксана 04.11.2014 в 15:52
Здравствуйте! Объясните мне чайнику в каком файле должны производиться все эти изменения, общая логика меню мне понятна, но где должен располагаться этот код никак не пойму.
Здравствуйте! Мне нужна помощь в задании конкретных координат горизонтального меню, а именно в шапке сайта, наложив его сверху на картинку шапки. Сайт на движке вордпресс, могу скинуть файлы header.php, style.php и function.php если они нужны. Ответ если можно пришлите на почту, и заранее спасибо!
Умник 27.08.2014 в 09:50
UL — это весь список, а LI — это вся строчка, вообще-то.
Katrin 25.06.2014 в 01:02
Подскажите как создать горизонтальное меню в CSS и HTML так скажем горизонтальные заголовки и каждый заголовок разным стилем Пример: «контакты ЗАГОЛОВОК корзина»
Артём 23.03.2013 в 14:01
Спасибо, статья очень помогла
Лариса 28.10.2012 в 09:41
Добрый день! Благодаря Вам смогла создать меню. Спасибо! Только есть один момент: в IE меню не горизонтальное, а вертикальное и на ширину страницы. Подскажите, как убрать этот бок. Вот CSS код: #menu{list-style:none; width:1100px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{ border: 1px solid #FFF; border-right-color: #527337; border-bottom-color: #527337; color:000099; display:block; height:36px; line-height:36px; padding:0px 10px 0px 10px; background:#CCCCFF; text-decoration:none; #menu a:hover{color:#FFFFFF; background:#9999FF;}
Тарас 29.10.2012 в 22:52
Это нужно тестировать. Такой эффект могут давать другие стили сайта. Если есть ссылка на пример, скидывайте сюда.
Валерий 10.09.2012 в 21:38
Вот ещё интересное горизонтальное меню — http://lecaw.ru/index.php/categories/css/item/280-kak-sdelat-gorizontalnoye-vipadayushee-menu-s-effektom-prokrutki-na-css
Добрый день . Получилось . Все благодаря ВАМ. Осталось несколько вопросов: 1 поместил внизу шапки сайта <div id …..relative;width:700px;margin:auto;font:bold 12px Verdana;color:#FFF2C0; display:block;height:40px; line-height:36px;padding:0px 1px 0px 1px; 1 это в CSS #uMenuDiv2{list-style:none; width:700px; padding:0; margin:auto;} #uMenuDiv2 li{float:left;font:bold 12px Verdana;color:#FFF2C0;} #uMenuDiv2 a{color:#ffffff; display:block; height:40px; line-height:36px; padding:0px 1px 0px 1px То , что выделено находится внизу шапки сайта и в CSS. Не понятно, что д. б. только в CSS И еще, понравилось , на вашем сайте – постоянная активность кнопки, обозначающая страницу, которая , сейчас открыта. М.б. подскажете . В любом случае огромное ВАМ СПАСИБО за помощь , ведь я узнал что то новое, благодаря ВАМ. С уважением Игорь
Тарас 31.07.2012 в 00:59
Можно хоть в CSS, хоть прямо в теге div. Лучше оставить только в css. Все стили выносят в отдельное место специально, чтобы легче было потом редактировать и менять дизайн. С активной кнопкой ничего не получиться, так как для этого нужно программировать… а как там все на укозе я не знаю. Всего вам доброго! Рад что все получилось.
игорь 29.07.2012 в 19:28
Добрый день, Тарас! Вообщем просмотрел разные варианты горизонтального меню, интернет , форумы ,все попробовал , но ничего не получилось , то искажает дизайн,то еще что то , тоска . Вывод- все что пишут в интернете — это для более- менее подготовленных , специалисты делятся своими разработками, вариантами и т.д. Новичкам это сложно . К ВАМ , убедительная просьба , если есть возможность , помогите довести дело до конца, ну а на нет …Вы и так много времени потратили на меня. С уважением Игорь
Тарас 30.07.2012 в 01:56
Дело в том, что я сам не знаю куда добавлять пункт uMenuDiv2… системой ucoz никогда не пользовался. Добавлять нужно туда где пишуться стили css… берете код, который подан в этой статье (здесь уже с ссылкой на фоновую картинку): #menu{list-style:none; width:500px; padding:0; margin: auto;} #menu li{float:left; font:bold 14px Arial;} #menu a{color:#666; display:block; height:40px; line-height:36px; padding:0px 10px 0px 10px; background:url(background.png) repeat-x; text-decoration:none;} #menu a:hover{color:#fff; background:url(hover.png) repeat-x;} вместо #menu пишите #uMenuDiv2… все остальное оставляете так же… две эти картинки закидаете в папку с файлом стилей (тот куда вы пишите этот код).
игорь 25.07.2012 в 20:22
Здравствуйте. Благодарю за ответы. То , что вы подсказали –сделал. Нравится. Провел день в поисках ответа 1 Посмотрите сайт http://compstil.ucoz.ru/ 2 Не получились блоки . цвет блоков и hover(цвета положил в файловый менеджер), есть адрес ссылки , но … Пробовал разные варианты ,смотрел интернет , форум –но результата нет,т.е. нет картинки как в вашей статье – красиво ,просто. 3 кстати , запутался , по моему эти данные надо вводить в CSS , но тогда м.б. надо создать в CSS пункт типа .. uMenuDiv2… , или эти данные надо добавлять в Site Menus или другое Если , возможно найдете время , пожалуйста посмотрите. Еще раз огромное спасибо за вашу помощь С уважением Игорь
игорь 25.07.2012 в 09:11
4 как разместить ссылки страниц в меню Вообщем , сами увидите , мои недоработки ,Прошу подсказать что надо доделать Еще раз огромное спасибо за вашу помощь С уважением Игорь Спасибо -всего 4 части Игорь Статья нужная , полезная
Тарас 25.07.2012 в 14:11
Вы вставили в меню просто текст, оно должно выглядеть следующим образом: <div> <li><a href=»http://compstil.ucoz.ru/»>Главная</a></li> <li><a href=»http://compstil.ucoz.ru/»>Доска объявлений</a></li> </ul> </div>
игорь 25.07.2012 в 09:09
3 Остались не решенными следующее — #menu {…} – С помощью этого выражения мы присваиваем стили для UL элемента, у которого id=menu. ????? — #menu li {…} – присваиваем стили для LI элементов. ???? — display:block; — делаем элемент блочным. Это даст возможность присваивать высоту для элемента. В практическом аспекте, это делает кликабельным не только текст ссылки, ни и поле вокруг текста. Не получилось — padding:0px 10px 0px 10px; делаем внутренние отступы слева и справа по 10 пикселей Не заметил — #menu a:hover {…} – присваиваем стили для A элемента при наведении на нее мышки.???? -color:#fff; – меняем цвет текста на белый. -background:#888; – цвет фона меняем на темно серый.
Тарас 25.07.2012 в 14:16
В вашем случае присваивание стилей будет следующим: #uMenuDiv2 {здесь идут все стили для меню} #uMenuDiv2 li {здесь идут стили для разделов меню, смотрите ответ на последний ваш коммент} #uMenuDiv2 a:hover {color:#fff; background:#888;} — это для ссылок меню при навидении. Рассмотрите еще раз, внимательно, картинку в начале урока! И HTML код меню.
игорь 25.07.2012 в 09:09
2 итак ,я взял Ваш код и поместил его внизу верхней части сайта и постепенно добавлял ,по пункту –получилось следующее <div> Главная Доска объявлений Новости Наука, техника Обратная связь Контакты </ul> </div>
игорь 25.07.2012 в 09:08
пересылаю частями Добрый день. Благодарю за ответ Возникли новые вопросы. Пожалуйста , если возможно , ответьте . Хочется довести дело до конца 1 Посмотрите сайт http://compstil.ucoz.ru/ Есть горизонтальное меню , созданное с вашей помощью. (этот сайт отличается от того . что я упоминал ранее , только названием и служит мне экспериментальной базой , на нем я пробую разные варианты , а потом переношу на основной)
игорь 23.07.2012 в 14:51
Здраввствуйте. сайт http://impexstil.ucoz.ru/ спасибо за проявленное желание помочь на сайте видно горизонтальное меню , надо его установить по центру и хотел бы такие же кнопки С уважением Игорь
Тарас 24.07.2012 в 00:14
<div> <ul> содержимое меню </ul> </div> вот так выглядит ваше меню… Попробуйте назначить к div ширину width:500px; или больше, главное чтобы хватало на все разделы. После этого к этому же div блоку добавьте атрибут margin:auto;
игорь 22.07.2012 в 14:16
Добрый день! Благодарю за статью .Очень полезна. Я, не специалист , поэтому похвала будет не корректно, Если позволите , вопрос: -у меня сайт ucoz, есть вертикальное меню , но надо продублировать в горизонтальном , с последующей переделкой вертикального меню в категории и др. Пока , не ясен вопрос в какой раздел CSS вставить код С уважением Игорь
Тарас 23.07.2012 в 14:39
Здравствуйте Игорь! К сожалению на ucoze я никогда не работал и не знаю что и к чему… Может быть что-то посоветую, если дадите ссылку на сайт (страницу).
Павел 03.07.2012 в 16:33
Спасибо! Ваша статья очень помогла мне!
timon 04.06.2012 в 12:20
Спасибо огромное!
artiom 14.05.2012 в 15:35
великолепно! респект и благодарность автору!)
Тарас 14.05.2012 в 15:59
Спасибо, Артем!
Устим 01.04.2012 в 19:45
Тарас, спасибо за ответ. Пробовал и так и так. Ничего не происходит. Только липнет к левому краю и всё…( Размпер остаётся тот же.
Устим 31.03.2012 в 17:14
Здравствуйте. Хотел бы узнать, как зделать так чтобы бекграунд меню был до самого конца сайта, а не заканчивался на последнем разделе. У меня шляпа сайта на весь экран по горизонтали, а меню от левого края идёт до средины, потому что всего 5-ть разделов. А я хотел бы чтобы полоса меню шла до конца. А то как то очень глупо получается сейчас)))
Тарас 01.04.2012 в 16:54
Уберите аттрибут width:500px, или установите 100%, должно работать.
Добавить комментарий
sitear.ru
Горизонтальное меню для сайта на HTML+CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Для создания меню используют теги <ul>, <li> и <a>.
Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.
Пример использования html тегов для создания меню в коде ниже:
<ul> <li><a href="#">Главная</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Цены</a></li> <li><a href="#">Контакты</a></li> </ul>
Стандартные CSS стили для горизонтального меню
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
margin-right:5px; /*Добавляем отступ у пунктов меню*/
}Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.
Пример каркаса (шаблона) вашего будущего меню
Получилось все достаточно простенько, вы ,конечно же, хотите сразу красивое главное меню, но без понимания основ у вас просто не получится создать хорошее меню без ошибок в html и css.
Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.
Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.
Примеры красивого горизонтального меню для сайта
Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.
Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже
Простое меню синего цвета с раздельными пунктами
CSS стили «верхнего» меню
Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
margin-top:25px; /*делаем отступ сверху*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
background:#30A8E6; /*добавляем фон к пункту меню*/
color:#fff; /*меняем цвет ссылок*/
padding:10px; /*добавляем отступ*/
font-family: arial; /*меняем шрифт*/
border-radius:4px; /*добавляем скругление*/
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
background:#1C85BB;/*добавляем эффект при наведении*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
margin-right:5px; /*Добавляем отступ у пунктов меню*/
}Главное меню, расположенное на цветной линии с красным фоном
CSS стили меню на цветной линии
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
margin-top:25px; /*делаем отступ сверху*/
background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/
height: 50px; /*задаем высоту*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/
color:#fff; /*меняем цвет ссылок*/
padding:0px 15px; /*добавляем отступ*/
font-family: arial; /*меняем шрифт*/
line-height:50px; /*ровняем меню по вертикали*/
display: block;
border-right: 1px solid #F36262; /*добавляем бордюр справа*/
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
background:#D43737;/*добавляем эффект при наведении*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
}Выпадающее меню на HTML+CSS
Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».
Пример создания простого выпадающего меню
HTML код выпадающего меню
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Длинная услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
</ul>
</li>
<li><a href="#">Цены</a></li>
<li><a href="#">Контакты</a></li>
</ul>Стили CSS выпадающего меню
ul {
list-style: none; /*убираем маркеры списка*/
margin: 0; /*убираем отступы*/
padding-left: 0; /*убираем отступы*/
margin-top:25px; /*делаем отступ сверху*/
background:#819A32; /*добавляем фон всему меню*/
height: 50px; /*задаем высоту*/
}
a {
text-decoration: none; /*убираем подчеркивание текста ссылок*/
background:#819A32; /*добавляем фон к пункту меню*/
color:#fff; /*меняем цвет ссылок*/
padding:0px 15px; /*добавляем отступ*/
font-family: arial; /*меняем шрифт*/
line-height:50px; /*ровняем меню по вертикали*/
display: block;
border-right: 1px solid #677B27; /*добавляем бордюр справа*/
-moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
-o-transition: all 0.3s 0.01s ease;
-webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
background:#D43737;/*добавляем эффект при наведении*/
}
li {
float:left; /*Размещаем список горизонтально для реализации меню*/
position:relative; /*задаем позицию для позиционирования*/
}
/*Стили для скрытого выпадающего меню*/
li > ul {
position:absolute;
top:25px;
display:none;
}
/*Делаем скрытую часть видимой*/
li:hover > ul {
display:block;
width:250px; /*Задаем ширину выпадающего меню*/
}
li:hover > ul > li {
float:none; /*Убираем горизонтальное позиционирование*/
}А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.
Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте:
Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.
Благодарю за внимание.
nz4.ru
css — Как выравнивать по центру горизонтальное меню ?
С http://pmob.co.uk/pob/centred-float.htm :
Посылка проста и в основном просто включает в себя безплатную плавучую оболочку, которая плавает влево, а затем сдвигается с экрана налево по ширине: относительная; Слева: -50%. Затем вложенный внутренний элемент обращается вспять и применяется относительное положение + 50%. Это приводит к потере элемента в центре. Относительное позиционирование поддерживает поток и позволяет другому содержимому течь под ним.
Код
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/<div>
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2's a bit longer</a></li>
<li><a href="#">Butt 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
</div>С CSS3 flexbox. Просто.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
Вот хорошая статья о том, как сделать это довольно солидно, без каких-либо хаков и полной поддержки кросс-браузера. Работает на меня:
-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Как и многие из вас, я некоторое время боролся с этим. Решение в конечном счете имело отношение к div, содержащему UL. Все предложения по изменению прокладки, ширины и т. Д. UL не повлияли, но следующее.
Это все о margin:0 auto; на содержащем div. Надеюсь, это поможет некоторым людям, и спасибо всем, кто уже предложил это в сочетании с другими вещами.
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
Вообще говоря, способ центрировать элемент уровня черного (например, <ul> ) использует margin:auto; имущество.
Чтобы выровнять элементы текста и встроенного уровня в элементе уровня блока, используйте text-align:center; , Так что все вместе …
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
… должно сработать.
Случай с интернетом — Internet Explorer6 … или даже другие IE, если вы не используете <!DOCTYPE> . IE6 неправильно выравнивает elemts уровня блока с помощью text-align . Поэтому, если вы ищете поддержку IE6 (или не используете <!DOCTYPE> ), ваше полное решение …
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
Как сноска, я думаю, id="topmenu firstlevel"
code-examples.net
Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Технический блог
Предлагаю, вашему вниманию простое и при этом красивое двухуровневое выпадающее горизонтальное меню на чистых CSS и HTML. Его код я собрал по крупицам и лично адаптировал при подготовке новой темы WordPress.
У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:
HTML код горизонтального выпадающего меню
Код горизонтального выпадающего меню выглядит так, это реальный пример взятый с одного из моих сайтов:
<nav role="navigation">
<ul>
<li><a href="/">Главная</a></li>
<li><a href="#">О блоге</a>
<ul>
<li><a href="/about">Об авторе</a></li>
<li><a href="/history">История блога</a></li>
<li><a href="/privacy-policy">Политика конфиденциальности</a></li>
<li><a href="/disclaimer">Отказ от ответственности</a></li>
</ul>
</li>
<li><a href="/sitemap">Карта сайта</a></li>
<li><a href="/contact">Обратная связь</a></li>
</ul>
<nav>
Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.
CSS код стилей для горизонтального выпадающего меню
/*| Navigation |*/
nav{
background: #334; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}
nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}
nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}
nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #445;
}
nav ul li:hover {
background: #445; /* Меняем фон пункта меню при наведении указателя мыши */
}
nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}
nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}
nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}
Выводы о реализации меню на CSS и HTML
Вот так легко и непринужденно можно сделать горизонтальное выпадающее меню на голом CSS и HTML. К недостаткам решения можно отнести то, что приведенный пример реализует двухуровневое выпадающее меню, то есть когда из горизонтального блока выпадает вертикальный. Если же вам нужно трехуровневое меню, когда из выпавшего вертикального меню необходимо появление еще одного подменю, то предложенное мною решение необходимо доработать.
Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.
Поделись этой страницей с друзьями!
moonback.ru
html — горизонтальное навигационное меню с подменю
У меня есть это навигационное меню:
http://jsfiddle.net/laziale/T45tD/4/
Я хочу знать, как я могу исправить меню, которое навигационное меню будет расширяемым с помощью подменю. Я ввел некоторые образцы данных, пожалуйста, не стесняйтесь помогать мне. Заранее спасибо.
Вот исходный код:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link type="text/css" rel="stylesheet" href="App_Themes/Main/style.css" />
<link type="text/css" rel="stylesheet" href="App_Themes/Main/reset.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<form runat="server">
<div>
<div>
<div>
<div>
<ul>
</ul>
</div>
<div>
<span>
</span>
</div>
<div>
<a href="#" title="Home">
<img src="Images/logo.jpg" />
<span>
</span>
</a>
</div>
</div>
<div>
<ul>
<li><a href="#">Client</a>
<ul>
<li><a href="#">Client Summary</a></li>
</ul>
</li>
<li><a href="#">Agent</a>
<ul>
<li><a href="#">Agent Summary</a>
<ul>
<li><a href="#">Link1y</a></li>
<li><a href="#">Link2</a></li>
</ul></li>
</ul>
</li>
<li><a href="#">System Utility</a>
<ul>
<li><a href="#">Link1</a>
<li><a href="#">Link2</a>
<li><a href="#">Link3</a>
</ul>
</li>
<li><a href="#">Report</a></li>
<li><a href="#">Maintenance</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div>
</div>
</form>
</body>
</html>
и css:
body {
min-width:1000px;
text-align:center;
margin:0px;
font-family:Arial;
font-size:12px;
color:#666666;
background:#8D8D8D;
}
.pagetop {
width:100%;
min-width:1000px;
background-color: #333333;
border-bottom: 4px solid #007FAA;
position:relative;
z-index:100;
min-height:149px;
}
.head_top {
position:relative;
min-height:114px;
}
.topbuts {
position:absolute;
top:0px;
right:0px;
}
.topbuts ul {
float:right;
}
.topbuts li {
float:left;
margin-left:2px;
font-size:11px;
font-weight: bold;
}
.topbuts li a {
background:#007FAA;
text-decoration:none;
display:block;
color:#FFFFFF;
line-height:16px;
padding:1px 12px 2px 12px;
}
ol ul {
list-style:none;
}
.head {
padding:0px;
}
.pagesize {
width:1000px;
margin: 0px auto;
text-align:left;
}
.user {
clear:both;
float:right;
padding-top:27px;
}
.user-detail {
display: block;
float:right;
text-align:right;
}
.user-detail .name {
display: block;
line-height:normal;
text-align:left;
float:right;
font-size:18px;color:#FFFFFF;
padding:2px 0px 7px 0px;
}
.user-detail .text {
color: #bbbbbb;
clear:both;
font-size:11px;
line-height:18px;
color:#FFFFFF;
display:block;
}
.logo {
padding-top:20px;
}
.logo a {
text-decoration:none;
}
.logo .picture {
float:left;
margin-right:10px;
}
.logo .textlogo {
float:left;
}
.logo .title {
display:block;
font-family:Arial;
font-size:20px;
color:#FFFFFF;
font-weight: bold;
margin-top:5px;
letter-spacing: -0.02em;
}
.logo .text {
display:block;
font-weight: bold;
color: #BBBBBB;
position:relative;
top: -2px;
}
.menu ul {
font-size:13px;
}
.menu li {
float:left;
margin-right:3px;
padding-bottom:5px;
position:relative;
}
.menu li .active a {
background: #FFFFFF;
color: #333333;
text-shadow: 1px 1px 1px #BBBBBB;
}
.menu li a {
display:block;
line-height:16px;
padding: 7px 15px 7px 5px;
color: #FFFFFF;
text-decoration:none;
font-weight:bold;
text-shadow: 1px 1px 1px #333333;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background:url('..images/button_glas1.png') center center repeat-x #555555;
}
a {
color: #006577;
text-decoration:none;
}
qaru.site
Создаем горизонтальное меню — Блог Вячеслава Волкова
Навигационное меню сайта – это элемент который присутствует на каждом сайте, будь то домашняя страничка, блог или же интернет-магазин. В стандарте HTML 5, данный элемент выделили даже в отдельный тег <nav></nav>.
Множество разработчиков создает этот элемент различными способами, но я хотел бы представить Вашему вниманию одну из самых удачных практик.
Меню мы будем строить на элементе – список, который лучше всего подходит для навигации и позволяет строить иерархические структуры меню при необходимости. Ниже представлена стандартная HTML схема меню.
Как видно, структура очень проста и понятна. Для стандарта HTML 4 существует элемент – div, в котором и находится наше меню. Для HTML 5 – мы используем элемент nav. Приведем листинг HTML кода.
Структура для HTML 4
<div> <ul> <li><a href="/index">Главная</a></li> <li><a href="/link1">Ссылка 1</a></li> <li><a href="/link2">Ссылка 2</a></li> <ul> </div>
Структура для HTML 5
<nav> <ul> <li><a href="/index">Главная</a></li> <li><a href="/link1">Ссылка 1</a></li> <li><a href="/link2">Ссылка 2</a></li> <ul> </nav>
И так у нас есть готовый список, как же теперь из этого получить нам красивое меню? Для это воспользуемся каскадными таблицами стилей и приведем нашу структуру в необходимый вид.
Зададим фиксированную высоту тегу <ul>, например 30 пикселей.
Для тега <li> зададим высоту строки такую же, как и высота самого <ul>, то есть 30 пикселей, это необходимо для того, что бы текст находился по середине.
Как только мы зададим свойство float у элемента <li>, то наше меню из вертикального превратится в горизонтальное, что нам и надо. Стоит заметить, что элементы с установленным свойством float автоматически становятся элементами уровня блока, потом этот блок смещает влево или вправо. Высота у тегов <li> должна быть такая же, как и у <ul>
Для тега <a> устанавливаем свойство display: block, это необходимо для того, что бы элемент занял всю область элемента <li> и вся эта область была “кликабельна”.
Теперь можно создать иерархическое меню
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Страница 1</a></li>
<li><a href="#">Страница 2</a></li>
<li><a href="#">Страница 3</a></li>
<li><a href="#">Страница 4</a></li>
<li><a href="#">Страница 5</a>
<ul>
<li><a href="#">Страница 5-1</a></li>
<li><a href="#">Страница 5-2</a></li>
<li><a href="#">Страница 5-3</a></li>
</ul>
</li>
</ul>
</nav>А теперь используя CSS стилизуем наше меню
ul.site-navigation {
height: 30px;
/* Зададим фон для списка */
background-color: #3DA4B7;
}
ul.site-navigation li {
line-height: 30px;
height: 30px;
float:left;
width:auto;
}
ul.site-navigation li a {
display: block;
color: #fff;
text-decoration:none;
padding: 0 10px;
border-right: 1px solid #f4f4f4;
/* Анимация для браузеров основаных на Webkit */
-webkit-transition: background-color 0.15s linear;
}
/* Добавим анимацию при наведении */
ul.site-navigation li a:hover {
background-color: #57BCCC;
}
ul.site-navigation li ul {
background-color: #3DA4B7;
display:none;
}
ul.site-navigation li ul li {
float: none;
}
ul.site-navigation li:hover ul {
display:block;
}Вот так, достаточно просто можно сделать удобное и практичное меню для сайта. Рабочий пример можно скачать по этой ссылке. Это довольно таки простой пример, в который затем можно добавить несколько дополнительных элементов функциональности.
Статья подготовлена с использованием материалов сайта http://woorkup.com
vexell.ru
html — центрирование горизонтальное выпадающее меню
Насколько я понимаю, вы не должны вставлять элементы уровня блока внутри встроенных элементов. При этом я создал это решение JSFiddle, упростив ваш HTML и заменив <div> который содержит «Контент» с дополнительным неупорядоченным списком. (Теоретически этот подсчет, который имеет только один <li>, должен иметь возможность удерживать <div> с содержимым, если вы этого желаете.)
Таким образом, HTML:
<ul>
<li>Home
<ul>
<li>Content</li>
</ul>
</li>
<li>One day
<ul>
<li>Content</li>
</ul>
</li>
<li>I wish to
<ul>
<li>Content</li>
</ul>
</li>
<li>Be in the
<ul>
<li>Content</li>
</ul>
</li>
<li>Centre of this page
<ul>
<li>Content</li>
</ul>
</li>
</ul>
И CSS был настроен так:
#menu {
text-align: center;
height: 30px;
}
#menu li {
list-style: none;
display:inline-block;
margin: 5px 15px;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
position: absolute;
top: 30px; /* height of menu */
left: 25px;
right: 25px;
}
В JSFiddle я добавил несколько цветов, чтобы было ясно, какой элемент есть. Я также удалил анимационный CSS, который у вас был в вашем живом примере, но это должно быть просто, чтобы ускользнуть.
Этот метод основан на предоставлении меню абсолютной высоты — в этом примере 30px — и затем абсолютно позиционирует «контент» <div> который появляется при наведении ниже него top: 30px (или независимо от высоты меню).
qaru.site
Leave a Comment