Вертикальное и горизонтальное меню на CSS и CSS3

В этом небольшом видео-уроке рассмотрим как создавать вертикальное и горизонтальное меню на CSS и CSS3.

Выставляйте качество 720р. Приятного просмотра.

Скачать исходники урока

HTML код менюшек

<ul id="menu">
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Видео</a></li>
	<li><a href="#">Фотогалерея</a></li>
	<li><a href="#">Контакты</a></li>
</ul>
<ul id="menu2">
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">Видео</a></li>
	<li><a href="#">Фотогалерея</a></li>
	<li><a href="#">Контакты</a></li>
</ul>

CSS и CSS3

body{
    background: #2a2a2c;
    font-size:14px;
    font-family: Arial, Tahoma;
}

#menu{
	list-style:none;
}

#menu li{
	border-radius:3px;
	margin-top:5px;
	width:150px;
	background: -webkit-linear-gradient(-90deg, #161616 0%,#000000 100%);
	border-left:1px solid #111;
    border-top:1px solid #111;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    -webkit-transition: all 0.4s ease-in-out;
}

#menu li:hover{
	-webkit-transform:translateX(25px);
    background: -webkit-linear-gradient(90deg, #161616 0%, #000000 100%);
}

#menu li a{
	color:#fff;
	display:block;
    width:150px;
	padding:10px;
    text-decoration: none;
    -webkit-transition: all 0.8s ease-in-out;
}

#menu li a:hover{
	color:#00c6ff;
    -webkit-transform:rotateX(360deg);
}

/*Menu2*/

#menu2{
    list-style:none;
	margin-top:30px;
}

#menu2 li{
	border-radius:3px;
	width:150px;
	background: -webkit-linear-gradient(-90deg, #161616 0%,#000000 100%);
	border-left:1px solid #111;
    border-top:1px solid #111;
    border-right:1px solid #333;
    border-bottom:1px solid #333;
    -webkit-transition: all 0.4s cubic-bezier(0.4,0.8,0.4,0.8);
    display: inline-block;
}

#menu2 li:hover{
	-webkit-transform:translateY(10px);
    background: -webkit-linear-gradient(90deg, #161616 0%, #000000 100%);
}

#menu2 li a{
	color:#fff;
	display:block;
    width:150px;
	padding:10px;
    text-decoration: none;
    -webkit-transition: all 0.4s ease-in-out;
}

#menu2 li a:hover{
	color:#00c6ff;
}

Если урок Вам был полезен, нажмите на любую кнопку ниже— буду благодарен :) Всем удачи и следите за ходом событий 😉

Комменты

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

  • Да что ж такое?! Уже скачать этот denwer, но не могу зайти на localhost. Выключил все брандмауэры и антивирусы, ничего не помогает. Подскажи, куда можно тебе написать,чтобы не засорять эту страницу?

  • Т.е на моей win64 я никак не смогу воспользоваться этим видео-курсом? Или всё-таки можно чем то заменить appserv 2.5.10?

    • Дмитрий Валак: 22-02-2013 в 10:04

      Можно установить другой сервер, их сейчас огромное кол-во.
      Например — denwer.

  • Дмитрий добрый день! У меня имеется ваш видео-курс по созданию интернет-магазина. Курс очень занимательный, но в папке с дополнительными материалами имеется программа appserv 2.5.10, которая предназначена для win32…А для win 64 у тебя есть? Пытался найти в интернете, ничего так и не смог найти.

  • Очень интересный урок. Но к сожалению на моем компе скачаные исходники не работают (нет сдвига кнопки при наведении). Не могу понять почему. У меня уствновлены Opera версия 12,   Mozilla версия 17. Может подскажете что нужно сделать. Спасибо

  • Спасибо,весьма полезная статья)