Сайт

Как сделать меню для сайта html: Готовое меню для сайта на css и jQuery

08.03.2019

Содержание

Готовое меню для сайта на css и jQuery

Вашему вниманию представляю готовое меню для сайта на CSS и jQuery с предоставлением кода на них для копирования и последующего редактирования меню под себя. Разнообразие меню для сайта довольно большое, и каждый найдёт здесь то меню, которое хотел бы видеть у себя на сайте.

А если есть небольшие навыки html и CSS, то сделать меню оригинальным под свой дизайн у вас не составит никакого труда.

Не пропустите

Выпадающее меню для сайта на CSS

Выпадающее меню для сайта на CSS — это выпадающее меню я когда-то успешно использовал у себя на сайте (верхнее меню), разумеется подкорректировав его под себя в стилях CSS.

Скачать выпадающее меню для сайта на CSS

Горизонтальное выпадающее меню

Готовое горизонтальное выпадающее меню в контрастных чёрно-белых тонах и с крисивым указателем пунктов. Очень легко редактируется под любой дизайн сайта.

Скачать горизонтальное выпадающее меню

Простое анимированное меню

Это совсем простое анимированное меню для сайта с разноцветными вкладками при наведении, где цвета пунктов меню довольно просто поменять по вашему вкусу.

Скачать простое анимированное меню

Красивое выпадающее меню на JQuery

В этом выпадающем меню на JQuery сделано красивое оформление со встроенным поиском в правой его части, при необходимости последний без проблем удаляется.

Скачать красивое выпадающее меню на JQuery

Простое меню для сайта на CSS

Ещё одно простенькое меню для сайта на CSS в серых тонах с наложенным градиентом и соответственно прост в изменениях под свои нужды.

Скачать простое меню для сайта на CSS

Горизонтальное многоуровневое меню на jQuery

Здесь представлено горизонтальное многоуровневое меню на jQuery в светлых тонах, из-за чего может подойти даже без редактирования к любому дизайну сайта.

Скачать горизонтальное многоуровневое меню на jQuery

Горизонтальное выпадающее меню на jQuery

Это интересное и яркое горизонтальное выпадающее меню для сайта на jQuery, выполнено с задумкой и красивыми эффектами. Самое трудное здесь при редактировании под себя — это подгон фото под нужное количество пунктов.

Скачать горизонтальное выпадающее меню на jQuery

Выезжающее меню на CSS

Выезжающее меню на CSS — у этого меню на CSS большой плюс — не занимает много места, конечно на любителя и не под каждый дизайн. При наведении мыши оно выезжает по горизонтали с довольно красивым эффектом. В демо вы увидете 2 разных примера этого меню.

Скачать выезжающее меню на CSS

Готовое меню на CSS

Довольно простое и симпатичное Готовое меню на CSS. Очень простое в редактирование и в установке на свой сайт.

Скачать готовое меню на CSS

Меню на CSS 3 в одном

Меню на CSS 3 в одном — включают в себя сразу три расцветки готового меню, одно из которых более подходящее, вы можете сразу использовать на своём сайте.

Скачать меню на CSS 3 в одном

Готовое многоуровневое меню на CSS

Готовое многоуровневое меню на CSS — немного подкорректировав это меню на CSS по своему дизайну и стилю, оно может отлично вписаться в любой сайт.

Скачать готовое многоуровневое меню на CSS

Готовое анимированное меню на jQuery

Готовое анимированное меню на jQuery — данное меню работает на трёх скриптах и имеет презентабельный вид, которое будет хорошо сочетаться с вашим дизайном на сайте.

Скачать готовое анимированное меню на jQuery

Готовое меню на CSS 6 в одном

Готовое меню на CSS 6 в одном — это простое анимированное меню на CSS с красивым оформлением. И на ваш выбор представлены готовых сразу шесть меню разных расцветок, из которых вы можете выбрать под свой дизайн, или изменив параметры в стилях сделать на свой вкус.

Скачать готовое меню на CSS 6 в одном

Cоздание выпадающего меню на HTML и CSS просто

Автор статьи: admin

В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.

Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.

Создание горизонтального выпадающего меню:

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<header>

    <nav>

        <ul>

            <li><a href=»#»>Главная</a></li>

            <li>Галерея

                <ul>

                    <li><a href=»#»>Машины</a></li>

                    <li><a href=»#»>Горы</a></li>

                    <li><a href=»#»>Компьютеры</a></li>

                </ul>

            </li>

            <li>О себе

                <ul>

                    <li><a href=»#»>Имя</a></li>

                    <li><a href=»#»>Аватарка</a></li>

                </ul>

            </li>

        </ul>

    </nav>

</header>

Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги <nav>, для лучшей индексации.

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

html, body {

margin: 0;

padding: 0;

}

 

nav > ul {

display: flex;

margin: 0;

width: 100%;

background-color: green;

}

 

nav > ul > li {

margin-right: 20px;

}

 

li {

color: white;

list-style: none;

font-size: 20px;

}

 

li a {

color: white;

text-decoration: none;

}

 

li > ul{

display: none;

position: absolute;

background-color: tomato;

padding: 0;

}

 

li:hover > ul{

display: block;

}

В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.

Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul>, которые находятся внутри тега <li>, сделать позиционирование absolute и добавить ему свойство display: none, что бы блок не показывался на экране.

Последнее важное изменение, это при наведении мышкой на <li>, внутри которого есть <ul>, он появлялся, вот что получилось.

Такое латовый вариант получился, теперь сделаем так, что бы меню выпадало с анимацией, а не просто появлялась, для этого не много изменим стили.

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

nav > ul {

display: flex;

margin: 0;

width: 100%;

height: 25px;

background-color: green;

}

 

li > ul{

position: absolute;

top: 40px;

visibility: hidden;

opacity: 0;

background-color: tomato;

padding: 0;

transition: 400ms;

}

 

li:hover > ul{

visibility: visible;

top: 25px;

opacity: 1;

}


В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.

В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.

Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.

Вывод:

В этой статье мы рассказали о создание выпадающего меню на HTML и CSS, если вам что то не понятно, то посмотрите наш учебник по HTML и CSS.

Подписываетесь на соц-сети:

Оценка:

(Пока оценок нет)

Загрузка…

Также рекомендую:

Красивое выпадающее меню – несколько примеров меню для сайта

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

Поразмыслив, вдруг понял, что запихнуть такую большую тему в один или два урока не реально, по этому это будет начальная страница для всех постов о выпадающих меню.

Моя цель: собрать как можно больше вариантов создания выпадающих меню на этой странице.

В макетах будет использовано:

  • Html
  • CSS
  • JavaScript / jQuery (в редких случаях)

Следите за обновлением страницы.

Для выбора нужного типа или шаблона меню, для сайта, воспользуйтесь навигацией по странице:

Горизонтальное выпадающее меню

к менюПожалуй, начнем мы с этой темы, ведь обычно в шапке сайта делают именно горизонтальное меню. Для начала поговорим о меню для сайта на чистом CSS + HTML.

Горизонтальное меню CSS

Ни для кого не секрет, что CSS 3 и HTML 5 шагнули далеко за границы своих предшественников. Например:

сегодня вам не нужно извращаться с вырезанием округленных уголков для меню, достаточно воспользоваться простым CSS свойством border-radius

хотя еще 5 — 10 лет назад резали мы картинки и собачили их как угодно :-).

Ладно, достаточно лирики. Главное, это тот факт, что современные браузеры поддерживают CSS 3 и HTML 5.

Горизонтальное выпадающее меню на css делается с помощью псевдокласса :hover. При чем ранее, браузеры навешивали это событие исключительно на тег <a> и <button>. Сегодня, можно смело использовать этот  псевдокласс CSS практически для всех тегов.

Сам код выпадающего меню для сайта я сюда забрасывать не буду, покажу скины и демо просмотр, а также ссылку на скачивание примера.

Прочитать пост полностью, а также просмотреть исходный код можно в записи: горизонтальное выпадающее меню.

В этом посте вы найдете:

  1. Простое горизонтальное выпадающее меню.
  2. Горизонтальное выпадающее меню на всю ширину.
  3. Выпадающее меню с разделителями.
  4. Многоуровневое выпадающее меню.

Все примеры выпадающих меню построены на списках ul li, я принципиально не использую тег table, так как такое меню не будет универсальным для установки на сайт ВП.

Демо просмотр выпадающее меню для сайта

к менюНажав на картинку, вы можете просмотреть фото пример меню. Нажав на демо, можно посмотреть работу меню.

Простое горизонтальное выпадающее меню

 

 

Горизонтальное выпадающее меню на всю ширину

 

 

Выпадающее меню с разделителями

 

 

Многоуровневое выпадающее меню

 

 

Многоуровневое выпадающее меню с выпадашкой на всю ширину

Все выпадающее меню в примерах работающие, можете проверить их в демке. Более подробно по этой ссылке https://help-wp.ru/gorizontalnoe-vypadayushhee-menu/

 

Вертикальное выпадающее меню

к менюДалее я покажу вам как делается вертикальное выпадающее меню при наведении. Стили CSS по аналогии с горизонтальным меню, то есть основным элементов есть псевдокласс :hover, на его базе и будут построенные вертикальные меню для сайта с выпадашкой по наведению.

Основное описание по созданию таких меню для сайта находится по ссылке вертикальное выпадающее меню. Там вы найдете стили CSS для сайта, а также Html код.

Здесь вы  сможете просмотреть меню в режиме демо, а также скачать готовые примеры меню. Смотрим ниже шаблоны выпадающих меню, в разных вариантах:

Вертикальное выпадающее меню вправо.

 

 

 

Вертикальное выпадающее меню CSS влево

 

 

 

Вертикальное многоуровневое меню

 

Подробно можно прочесть по этой ссылке https://help-wp.ru/vertikalnoe-vypadayushhee-menu/

 

Вертикальное меню аккордеон на jQuery

к менюОдним из самых используемых видов меню, на русскоязычных сайтах, есть вертикальное меню аккордеон.

Кто не в курсе, — это меню раскрывается внутри блока при клике на родительский элемент без перехода по ссылке. Если кликнуть на следующий родительский элемент то предыдущий закроется, а новый будет открываться параллельно.

Предлагаю вам посмотреть 2 вида таких меню:

  • без использования сложных стиле и фонов
  • более красивый с фоновым изображением и картинками указателями.

 

Простое вертикальное меню аккордеон

 

 

 

Красивое меню для сайта аккордеон

Детальный код и описание этих меню смотрите по этой ссылке https://help-wp.ru/menu-akkordeon-on-click/

 

Добавить меню для сайта wordpress

к менюОбычно, я рассказываю в своих уроках о CMS WordPress, так как позиционирую себя как специалиста по Вордпресс. В этом уроке, также хотелось бы поговорить о выпадающих меню WP.

По сути, выпадающее меню wordpress ни чем не отличается от менюшек для остальных CMS, главное правильно вывести и добавить его.

Хотя, иногда бывают случаи, когда интегрировать html меню у WordPress это сплошной геморой.

Бывает приносят верстку, а там вот такой чудо хтмл код:

<ul>
    <li><a href="#"><span>Пункт </span><span>1</span></a></li>
    <li><a href="#"><span>Пункт </span><span>2</span></a></li>
    <li><span><span>Пункт </span><span>3</span></span></li>
    <li><a href="#"><span>Пункт </span><span>4</span></a></li>
</ul>

Ну и как такое чудо, можно по человечески вставить в WP – по сути без переделки никак. Ну и начинается возня с заказчиком. Он же верстку в Равшана с Джамшутом заказал, так сказать бюджетный вариант на базе говнокода.

В этой записи можно посмотреть как правильно в wordpress добавить меню. Конкретно в этом посте нас интересует работа функции wordpress:

wp_nav_menu()

Все примеры выше, выпадающее меню на списках, идеально подходят для установки на wordpress.

Краткая инструкция выпадающее меню wordpress – установка

1) к менюНаходим подходящий для себя шаблон меню выше.

2) Скачиваем пример к себе на комп, разархивируем его.

3) На место, где будет выводится меню устанавливаем хтмл код, который отвечает за меню. Он начинается и заканчивается в моих примерах тегом <nav></nav> (тег и идентификатор обязательные для копирования, иначе стили не будут работать)

4) Если у примера есть javascript, его нужно подключить в ваш шаблон. Библиотеку jQuery подключать не нужно, так как она у WP подключается автоматически. Главное добавлять код после функции wp_head().

5) Стили из примера нужно скопировать у файл style.css вашей темы.

Стили для body и контейнера можно не копировать.

6) Для вывода меню используем функцию wp_nav_menu(), ее нужно вставить вместо хтмл который находится между <nav> и </nav>.

7) Меню для сайта нужно предварительно зарегистрировать в functions.php а также создать на сайте. Как это делается можно прочесть по ссылке: https://help-wp.ru/wordpress-menu/

 

На этом у меня все, в качестве спасибо можно поделиться ссылкой со своими друзьями в соц. сетях:

Следите за этим постом, по мере возможности, я буду добавлять сюда ссылки на новые шаблоны выпадающих меню.

 

Комментарии к записи «Красивое выпадающее меню – несколько примеров меню для сайта»:

CSS меню для начинающих / Хабр


Данное руководство поможет Вам создать CSS меню для вашего сайта, оно не будет обычным, оно будет привлекать внимание пользователей, не сомневайтесь. И так приступим…

Фон для меню


Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:


Графические кнопочки


Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop’ом: 

 

HTML код


Закончили строить из себя дизайнеров, пора начинать кодить — создадим не нумерованный список — :
  • элементу <ul> присвоеим id=«menu»
  • каждой ссылке <a> присвоим уникальное имя класса
  • Внутрь тэга <a> закинем пустой тэг <span> (понадобиться для реализации подсказок к ссылкам)

<ul id=«menu»>
<li><a href=»#» class=«home»>Home <span></span></a></li>
<li><a href=»#» class=«about»>About <span></span></a></li>
<li><a href=»#» class=«rss»>RSS <span></span></a></li>
</ul>

 

CSS код

 
 #menu 
 Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative. Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.
 
 #menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
 
 #menu span 

 Для элементов span параметр display выставляем в none (по умолчанию не будут отображаться). Так же выставляем position как absolute.

#menu span {
display: none;
position: absolute;
}
 
 #menu a 

 Для ссылок нам необходимо спрятать текст, для этого параметру text-indent присваиваем негативное значение (-900%), и текст будет скрыт.
 

 #menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
 
 #menu a:hover 

 Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:
 

 #menu a:hover {
background-position: left bottom;
}
 

 #menu a:hover span 

 Так же по событию mouseover необходимо отобразить подсказку

#menu a:hover span {
display: block;
}
 
 #menu .home

Теперь нам необходимо правильно расставить элементы меню. Для начала укажем размер элемента и фоновое изображение, а затем займемся позиционированием, будем изменять параметры left и top пока не почувствуем морального удовлетворения от внешнего вида меню:
 

 #menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 96px;
}
 
 #menu .home span 

 Теперь проведем подобную операцию для всплывающей подсказки
 

 #menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
 
 #menu .about 

 Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.
 

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
 
 #menu .rss 

Повторим для .rss

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
 
Всё в одном
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
 
 #menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
 
 #menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
 
 #menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Это всё, протестировать меню можете тут, а скачать пример тут.

Вольный перевод: http://www.webdesignerwall.com/tutorials/advanced-css-menu/

Кросспост: CSS меню в стиле Web 2.0

Верстаем панель меню с помощью HTML и CSS.

В прошлой статье мы нарисовали панель меню.

В этой статье мы сверстаем эту панель меню с помощью HTML и CSS.

Для начала создадим папку и дадим ей название «панель меню», в ней создадим ещё одну папку и назовём её “images”.

Открываем нашу панель меню в Photoshop. Скачать её вы можете вот здесь (в конце статьи).

Делаем нарезку для панели меню.

Отключаем все слои, кроме слоя «блок меню», отключаем для этого слоя тень и включаем направляющие CTRL+;.

Берём инструмент «раскройка».

Аккуратно вырезаем нашу панель строго по направляющим.

Файл -> сохранить для WEB. Формат выбираем PNG-24 (справа вверху). После того, как вы нажмёте кнопку «сохранить», появится вот такое окно, где нужно будет выбрать пункт «выделенные фрагменты».

Даём файлу название “menu” и сохраняем в папку images.

Отключаем слой «блок меню» и включаем слой «окно поиска». Точно так же вырезаем его и сохраняем в папку “images” под названием  “serach-txt” .

Таким же образом вырезаем значок поиска, дав ему имя “serach-btn”  и разделительную линию, назвав её “bg-menu”.

Итак, у нас в папке Images должно быть 4 файла PNG:

Пишем разметку панели меню.

<!DOCTYPE html>
<html>
     <head>
          <meta charset=»utf-8″>
          <link rel= «stylesheet» type= «text/css» href= «style.css» />
          <title>Панель меню</title>
     </head>
     <body>
          <div>
               <ul>
                    <li><a href=»#»>Главная</a></li>
                    <li><a href=»#»>О нас</a></li>
                    <li><a href=»#»>Контакты</a></li>
               </ul>
               <form action=»» method=»»>
                    <input type=»text» name=»serach» />
                    <input type=»image» src=»images/serach-btn.png» />
               </form>
          </div>
     </body>
</html>

Обратите внимание, что нашу панель меню мы заключили в div с классом “menu”.

Окну поиска мы присвоили класс “serach-txt”.

Кнопке поиска мы присвоили класс “serach-btn” и прописали путь к картинке.

Если взглянуть в браузер, то увидим вот такую картину:

Пишем стили.

В редакторе создаём файл style.css(синтаксис css) и поехали прописывать стили.

Для всей страницы задаём фоновый цвет.

body {
background: #78a944;
}

Код цвета мы смотрим в Photoshop с помощью пипетки.

Пишем стили для класса “menu”.

  • Задаём фоновый рисунок для панели меню.

.menu {
background:url(images/menu.png) no-repeat;
}

  • Выставляем ширину и высоту панели меню.

width: 1002px;
height: 102px;

  • Выставляем нашу панель по центру.

margin:0 auto;
overflow:hidden;

  • Делаем отступ сверху.

margin-top: 70px;

border: 1px solid #adc88f;

  • Закругляем углы.

border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;

Пишем стили для li.

  • Убираем маркеры.

li {
list-style:none;
}

  • Выравниваем все пункты li по левому краю.

float:left;

  • Задаём отступы.

padding:15px 17px 25px 17px;

  • Вставляем разделительную линию.

background:url(images/bg-menu.png) left center no-repeat;

  • Убираем первую разделительную линию.

li:first-child{
float:left;
background:none;
padding:15px 17px 25px 17px;
}

Пишем стили для a.

  • Убираем подчёркивание.

a {
text-decoration: none;
}

  • Определяем размер и стиль шрифта.

font:30px «Century Gothic» ;

  • Делаем шрифт жирным.

font-weight: bold;

  • Задаём цвет тексту.

color: #121e06;

  • Создаём тень от текста.

text-shadow:2px 2px 1px #b3d48f;

  • При наведении курсора мыши на пункт меню, текст делаем светло-зелёным, тень убираем.

a:hover {
color: #c6ea9f;
text-shadow:none;
}

Пишем стили для окна поиска, т.е. для  класса serach-txt.

  • Определяем фоновый рисунок и размеры для окна поиска.

.serach-txt {
background: url(images/serach-txt.png)no-repeat;
width:302px;
height:40px;
}

  • Закругляем углы.

border-radius: 7px;/*радиус закругления*/
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

  • Задаём отступы.

margin:12px 0 30px 115px;

И наконец, пишем стили для значка поиска, т.е. для класса serach-btn.

  • Выравниваем значок поиска по правому краю.

.serach-btn {
float:right;
}

  • Делаем отступы, т.е. располагаем значок поиска там где надо.

margin: 17px 20px 0 0;

Ну вот и всё!

В итоге у нас должен получиться вот такой файл стилей style.css.

body {
background: #78a944;
}
.menu {
background:url(images/menu.png) no-repeat;
width: 1002px;
height: 102px;
margin:0 auto;
overflow:hidden;
margin-top: 70px;
border: 1px solid #adc88f;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
}
li {
list-style:none;
float:left;
padding:15px 17px 25px 17px;
background:url(images/bg-menu.png) left center no-repeat;
}
li:first-child{
float:left;
background:none;
padding:15px 17px 25px 17px;
}
a {
text-decoration: none;
font:30px «Century Gothic» ;
font-weight: bold;
color: #121e06;
text-shadow:2px 2px 1px #b3d48f;
}
a:hover {
color: #c6ea9f;
text-shadow:none;
}
.serach-txt {
background: url(images/serach-txt.png)no-repeat;
width:302px;
height:40px;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
margin:12px 0 30px 115px;
}
.serach-btn {
float:right;
margin: 17px 20px 0 0;
}

Проверить валидность CSS кода можно на этом сайте: https://jigsaw.w3.org/css-validator/.

Как сделать выпадающее меню читайте здесь.

Простое и красивое горизонтальное выпадающее меню на 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. К недостаткам решения можно отнести то, что приведенный пример реализует двухуровневое выпадающее меню, то есть когда из горизонтального блока выпадает вертикальный. Если же вам нужно трехуровневое меню, когда из выпавшего вертикального меню необходимо появление еще одного подменю, то предложенное мною решение необходимо доработать.

Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.

Создание нескольких страниц с меню навигации

Введение

В этой статье учебной программы по веб-стандартам мы поговорим о навигации и меню веб-сайта. Вы узнаете о различных типах меню и о том, как создавать их в HTML. Мы также затронем тему удобства использования и доступности меню. Мы пока не будем углубляться в стилизацию меню, но эта статья заложит основы. В дополнение к этой статье можно загрузить примеры кода — мы будем ссылаться на них на протяжении всего руководства.

HTML5 определяет меню

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *