Код html меню для сайта – Горизонтальное меню для сайта

Содержание

Большой обзор красивых многоуровневых меню с codepen / mr. Gefest corporate blog / Habr

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.

http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg

 
Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
 
Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

 
Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.

http://codepen.io/cmcg/pen/ofFiz
 
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

habr.com

Создание горизонтального меню с помощью HTML и CSS

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

Для написания сценария можете использовать любой HTML редактор, но не забудьте сохранить файл с расширением .HTML.

Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
    <li><a href=”#”>Link1</a></li>
    <li><a href=”#”>Link2</a>
          <ul>
            <li><a href=”#”>Link2.1</a></li>
            <li><a href=”#”>Link2.2</a></li>
            <li><a href=”#”>Link2.3</a></li>
         </ul>
    </li>
    <li><a href=”#”>Link3</a>
          <ul>
          <li><a href=”#”>Link3.1</a></li>
          <li><a href=”#”>Link3.2</a></li>
          </ul></li>    
    <li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>

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

• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4

Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением .css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:

<style>
/* Main */
    #menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    }
</style>

После добавления CSS:


Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:

#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;  
    background: #111;
    border-radius: 50px;
}

После добавления CSS:


Он выглядит лучше, правда?

Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative; 
}

После добавления CSS:


Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #CC6600;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000; 
}

После добавления CSS:


Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:

#menu li:hover > a{
    color: #CC3333; 
}

Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;    
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    background: #222; }
   #menu li:hover > ul{
    display: block; 
}

После добавления CSS:


Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block; 
}

Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:

#menu ul a{    
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
 }

Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:

#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ” “;
    clear: both;
    height: 0;
 }

После добавления CSS:


На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.

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

#menu ul li:first-child a:after{
    content: ”;
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #FF0000;
}

После добавления CSS:


Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:

После добавления CSS:


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

Данная публикация представляет собой перевод статьи «Create horizontal menu bar using HTML and CSS» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Создаем выпадающее меню на чистом CSS

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.


Исходный код
Демо

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

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a></li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
			</nav>

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */
			nav {
			    margin: 100px 0;
			    background-color: #E64A19;
			}
			
			/* убираем отступы и поля, а также list-style для "ul", 
			 * и добавляем "position:relative" */
			nav ul {
			    padding:0;
			    margin:0;
			    list-style: none;
			    position: relative;
			    }
			
			/* применяем inline-block позиционирование к элементам навигации */
			nav ul li {
			    margin: 0px -7px 0 0;
			    display:inline-block;
			    background-color: #E64A19;
			    }
			
			/* стилизуем ссылки */
			nav a {
			    display:block;
			    padding:0 10px;
			    color:#FFF;
			    font-size:20px;
			    line-height: 60px;
			    text-decoration:none;
			}
			
			/* изменяем цвет фона при наведении курсора */
			nav a:hover {
			    background-color: #000000;
		}

После применения стилей у нас должно получиться нечто вроде этого:


Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a></li>
			            </ul>
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress. Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

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

/* скрываем выпадающие списки по умолчанию
			 * и задаем абсолютное позиционирование */
			nav ul ul {
			    display: none;
			    position: absolute;
			    top: 100%;
			}
			
			/* отображаем выпадающий список при наведении */
			nav ul li:hover > ul {
			    display:inherit;
			}
			
			/* первый уровень выпадающего списка */
			nav ul ul li {
			    min-width:170px;
			    float:none;
			    display:list-item;
			    position: relative;
			}

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):


Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a>
			
			                    <!-- второй уровень выпадающего списка -->
			                    <ul>
			                        <li><a href="#">Stuff</a></li>
			                        <li><a href="#">Things</a></li>
			                        <li><a href="#">Other Stuff</a></li>
			                    </ul>
			                    <!—конец второго уровня выпадающего списка -->
			
			                </li>
			            </ul>
			            <!—конец первого уровня выпадающего списка -->
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

/* второй, третий и последующие уровни 
			 * смещаем 2 и 3 уровни влево 
			 * на значение длины первого уровня.
			*/
			nav ul ul ul {
			    position: absolute;
			    top:0;
			    left:100%;
		}

Если все сделано правильно, у вас должно получиться нечто вроде этого:


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

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

/* измените ' +' на любой другой символ, если нужно
	*/
			li > a:after { content:  ' +'; }
		li > a:only-child:after { content: ''; }

Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?


Значит, вы все сделали правильно.

В завершение

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

А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

Данная публикация представляет собой перевод статьи «How to Create a Pure CSS Dropdown Menu» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Создание простого меню для сайта на HTML и CSS

И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.

 

Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта. С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню. Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!

 

 

Первый шаг. HTML.

 

И так, переходим к первому шагу данного урока и сначала нам нужно подключить файл demo.css, который лежит у нас в папочке css, а затем уже подключаем шрифт Open Sans. Ребята, я рассказываю все по демо, поэтому Вы можете все делать по своему усмотрению. 

 


<link rel="stylesheet" href="css/demo.css">
<link href="http://allfont.ru/allfont.css?fonts=open-sans" rel="stylesheet" type="text/css" />

 

Далее нам нужно создать обычный маркированный список ul li, а также задать первому ul идентификатор nav, чтобы мы могли работать через него, обращаясь к стилям css. Делается это очень просто, не знаю, что тут можно описать, поэтому скидываю сразу структуру, как в демо.

 


<ul>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
</ul>

 

 

Второй шаг. CSS.

 

 

Переходим к стилям CSS и первым делом, мы должны установить тот шрифт, который прописали вначале данного урока, а именно Open Sans. После того, как наш шрифт успешно прописан, переходим уже к самому каркасу нашего маркированного списка, которому зададим определенные свойства, а также расположение и позиционирование элементов. Заметим, что мы создаем горизонтальное меню, поэтому применяем свойство float left

 


#nav{
	font-family: 'Open Sans', arial;
}

#nav li{
	float:left; /* все ссылки идут слева на право */
    position:relative;
    list-style:none; /* убираем точки */
    background:#ff3131;
	width:190px;
}

 

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

 


#nav a{
    text-decoration:none;
    display:block; /* делаем блочным элементов тег "a" */
    padding:35px 65px;
    color:#ffffff;
}

#active a, #nav li:hover > a{
    background:#b32424;
}

#nav ul {
	visibility:hidden; /* скрываем выпадающее меню */
    padding:0;  
    position:absolute;
}

 

Теперь после того, как наше меню успешно скрыто, нам нужно сделать выпадающее меню. Это реализовать достаточно просто, нужно задать элементу меню с идентификатором nav свойство visible. Тем самым мы получим результат выпадающего меню. Далее все по стандарту, изменяем выпадающее меню на наше усмотрение, задаем ему отступы и цвет. Не забываем указать свойство left 0 при ховере, ведь без него все выпадающее меню поедет и соответственно будет не очень красиво. (пункт 1)

 


#nav li:hover > ul{
    visibility:visible; /* показываем выпадающее меню при наведении */
	position: relative;
}

#nav ul a{
	padding:18.5px 65px; /* делаем отступы выпадающего меню меньше от основного */
}

#nav ul li:hover{
    background:#d92a2a;
}

#nav li:first-child:hover > ul{
	left: 0px; /* при наведении на первый элемент чтобы не съежало выпадающее меню */
}

 

Так как Евгений, подготовил макет данного меню, то все моменты связанные с его дизайном, мы реализовали с Вами в соответствии. Теперь, нам нужно реализовать border меню, так как он имеют некую функциональную особенность. Давайте ее ра

roothelp.ru

Простое горизонтальное меню (css + html)

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


<div>
	<ul>
		<li><a href="#">Ссылка 1</a></li>
		<li>
			<a href="#">Ссылка 2</a>
			<ul>
				<li><a href="#">Ссылка подменю 1</a></li>
				<li><a href="#">Ссылка подменю 2</a></li>
			</ul>
		</li>
		<li><a href="#">Ссылка 3</a></li>
		<li><a href="#">Ссылка 4</a></li>
	</ul>
</div>

Теперь к созданной структуре применим следующие стили:


.top-menu li{
	list-style:none;/*Убираем маркер*/	
	display:inline-block;/*Выстраиваем пункты в ряд*/
	background:#ccc;/*Цвет фона для пункта*/
	position:relative;
}
.top-menu li:hover{
	background:#eee;/*Цвет фона при наведение на пункт*/
}
.top-menu li a{
	color:#222;/*Цвет шрифта в пункте*/
	padding:5px 7px;/*Отступы для пункта*/	
	text-decoration:none;/*Убираем подчеркивание*/	
	display:block;
}
.top-menu li ul{
	display:none;/*Прячем выпадающее меню*/
	position:absolute;
	padding-left:0;
	width:120px;/*Ширина выпадающего меню*/
	padding-top:3px;/*Отступ сверху у выпадающего меню*/
}
.top-menu li:hover ul{
	display:block;/*Показываем выпадающее меню при наведение*/
	left:0px;
}

В итоге получим:
drop-down-menu

Меню созданному на чистом css, очень легко предать требуемый вид. Для того чтобы сменить цвет шрифта нужно поменять значение color, для смены фона значение background

Готовый пример — Скачать

pro-cod.ru

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

#menu {

position: relative;

float: left;

width: 100%;

padding: 0 20px;

border-radius: 3px;

box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);

background: #ccc;

}

 

#menu, #menu ul {

list-style: none;

}

 

#menu > li {

float: left;

position: relative;

border-right: 1px solid rgba(0,0,0,.1);

box-shadow: 1px 0 0 rgba(255,255,255,.25);

perspective: 1000px;

 

}

 

#menu > li:first-child {

border-left: 1px solid rgba(255,255,255,.25);

box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);

}

 

#menu a {

display: block;

position: relative;

z-index: 10;

padding: 13px 20px 13px 20px;

text-decoration: none;

color: rgba(75,75,75,1);

line-height: 1;

font-weight: 600;

font-size: 12px;

letter-spacing: -.05em;

background: transparent;

text-shadow: 0 1px 1px rgba(255,255,255,.9);

transition: all .25s ease-in-out;

 

}

 

#menu > li:hover > a {

background: #333;

color: rgba(0,223,252,1);

text-shadow: none;

}

 

#menu li ul {

position: absolute;

left: 0;

z-index: 1;

width: 200px;

padding: 0;

opacity: 0;

visibility: hidden;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

background: transparent;

overflow: hidden;

transform-origin: 50% 0%;

}

 

#menu li:hover ul {

 

padding: 15px 0;

background: #333;

opacity: 1;

visibility: visible;

box-shadow: 1px 1px 7px rgba(0,0,0,.5);

animation-name: swingdown;

animation-duration: 1s;

animation-timing-function: ease;

 

}

 

@keyframes swingdown {

0% {

opacity: .99999;

transform: rotateX(90deg);

}

 

30% {

transform: rotateX(-20deg) rotateY(5deg);

animation-timing-function: ease-in-out;

}

 

65% {

transform: rotateX(20deg) rotateY(-3deg);

animation-timing-function: ease-in-out;

}

 

100% {

transform: rotateX(0);

animation-timing-function: ease-in-out;

}

}

 

#menu li li a {

padding-left: 15px;

font-weight: 400;

color: #ddd;

text-shadow: none;

border-top: dotted 1px transparent;

border-bottom: dotted 1px transparent;

transition: all .15s linear;

}

 

#menu li li a:hover {

color: rgba(0,223,252,1);

border-top: dotted 1px rgba(255,255,255,.15);

border-bottom: dotted 1px rgba(255,255,255,.15);

background: rgba(0,223,252,.02);

}

web-stydia.com

css3 меню для сайта | Beloweb.ru

Здравствуйте, дорогие читатели блога. Сегодня представляю вторую часть подборки jQuery и CSS3 меню для Вашего любимого сайта. Если Вы не видели прошлую подборку, обязательно посмотрите. Я надеюсь, что Вам понравится. Наслаждайтесь:)

JQuery и HTML5 меню

Очень интересное меню с замечательным дизайном.

Пример ι Скачать исходники

Меню для сайта в стиле Apple

Отличная навигация для ресурса в голубых тонах с использованием JQuery.

Пример ι Скачать исходники

Интересное меню с JQuery

Простое и интересное меню с выбором объекта.

Пример ι Скачать исходники

Простое JQuery и css3 меню для сайта

Не сложное выпадающее меню.

Пример ι Скачать исходники

Многопользовательское выпадающее CSS3 меню

Классное выпадающее меню с подменю в тёмных тонах.

Пример ι Скачать исходники

CSS3 меню с выпадающими подменю

Очень интересное меню для сайта, я уверен Вам понравится:)

Пример ι Скачать исходники

Темное выпадающее CSS3 меню

Замечательное выпадающее меню для сайтов в тёмных тонах.

Пример ι Скачать исходники

Круглое меню для сайта

Бесподобное и удивительное меню сделанное в форме круга.

Пример ι Скачать исходники

Всплывающее меню с JQuery

Классное всплывающее меню внизу сайта. В примере нажмите крестик в нижнем левом углу.

Пример ι Скачать исходники

Выпадающее меню с JQuery

Пример ι Скачать исходники

Анимационное CSS3 меню

Очень красивое меню, которое подойдёт практически для любого сайта.

Пример ι Скачать исходники

Красивое CSS3 меню

Пример ι Скачать исходники

JQuery и CSS3 выпадающее меню

Отличное многоуровневое выпадающее меню в темных тонах для Вашего сайта.

Пример ι Скачать исходники

Анимационное меню для сайта

Пример ι Скачать исходники

Яркое и красивое меню с JQuery

Пример ι Скачать исходники

Меню для сайта с использованием JQuery

Замечательное меню с превосходным дизайном.

Пример ι Скачать исходники

Вертикальное и горизонтальное меню для сайта

Отличное меню с выпадающими ссылками и подсказками.

Пример ι Скачать исходники

Классное анимационное меню с JQuery

Пример ι Скачать исходники

Обалденное меню мозайка

Пример ι Скачать исходники

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

Пример ι Скачать исходники

beloweb.ru

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

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