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

Содержание

Раздвигающееся вертикальное меню на CSS3
Разметка HTML
CSS
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Реализация забавных подсказок
Анимированные буквы
Солнцезащитные очки от первого лица
Раздвигающееся вертикальное меню на CSS + JS
Создаем эффектное вертикальное меню на HTML5 и CSS3
Шаг 1. Базовая HTML-разметка
Шаг 2. Шрифты с изменяющимся размером
Шаг 3. CSS стиль основного меню
Вертикальное раздвижное меню с описанием
Шаг 1. HTML
Шаг 2. CSS
Шаг 3. jQuery
Вертикальное раздвигающееся css меню

Раздвигающееся вертикальное меню на CSS3

В данном уроке представлено вертикальное раздвигающееся меню на CSS3. Подпункты появляются при нажатии основного пункта.

demo sourse

Разметка HTML

Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).


  Главная
  HTML/CSS 
   Ссылка 1
   Ссылка 2
   Ссылка 3
   Ссылка 4
   Ссылка 5


  jQuery/JS 
   Ссылка 6
   Ссылка 7
   Ссылка 8
   Ссылка 9
   Ссылка 10


  PHP
  MySQL
  XSLT

CSS

#nav < border:3px solid #3e4547; box-shadow:2px 2px 8px #000000; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; >#nav, #nav ul < list-style:none; padding:0; width:200px; >#nav ul < position:relative; z-index:-1; >#nav li < position:relative; z-index:100; >#nav ul li < margin-top:-23px; -moz-transition: 0.4s linear 0.4s; -ms-transition: 0.4s linear 0.4s; -o-transition: 0.4s linear 0.4s; -webkit-transition: 0.4s linear 0.4s; transition: 0.4s linear 0.4s; >#nav li a < background-color:#d4d5d8; color:#000; display:block; font-size:12px; font-weight:bold; line-height:28px; outline:0; padding-left:15px; text-decoration:none; >#nav li a.sub < background:#d4d5d8 url("../images/down.gif") no-repeat; >#nav li a + img < cursor:pointer; display:none; height:28px; left:0; position:absolute; top:0; width:200px; >#nav li a img < border-width:0px; height:24px; line-height:28px; margin-right:8px; vertical-align:middle; width:24px; >#nav li a:hover < background-color:#bcbdc1; >#nav ul li a < background-color:#eee; border-bottom:1px solid #ccc; color:#000; font-size:11px; line-height:22px; >#nav ul li a:hover < background-color:#ddd; color:#444; >#nav ul li a img < background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; margin-right:5px; vertical-align:middle; width:16px; >#nav ul li:nth-child(odd) a img < background:url("../images/bulb2.png") no-repeat; >#nav a.sub:focus < background:#bcbdc1; outline:0; >#nav a:focus ~ ul li < margin-top:0; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linears; -webkit-transition: 0.4s linears; transition: 0.4s linear; >#nav a:focus + img, #nav a:active + img < display:block; >#nav a.sub:active < background:#bcbdc1; outline:0; >#nav a:active ~ ul li < margin-top:0; >#nav ul:hover

Читайте также: Css button no borders

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/css3-onclick-vertical-metal-menu/
Перевел: Сергей Фастунов
Урок создан: 5 Июня 2012
Просмотров: 74871
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Раздвигающееся вертикальное меню на CSS + JS

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

Приступаем к установке:

Стильные кнопки CSS
- Дизайн и анимация
- Стильные кнопки CSS
- Эффект появление
- Стилизация флажков
Создать анимацию
- Аккордеон
- Функциональный
- ZORNET.RU
- ZORNET.RU
Эффект пульсации
- Скорость закгрузки сайта
- Вращение изображения
- Кнопки с удивительными
- Оформления блоков
Сайт ZORNET.RU
- Скрипты для uCoz
- Шаблоны для uCoz
- Ajax окна для uCuz
- Иконки для форума

ul#ustasub_scriptionis , ul#ustasub_scriptionis ul <
list-style-type:none;
width: 279px;
margin: 0 auto;
padding: 0;
>

ul#ustasub_scriptionis a <
display: block;
text-decoration: none;
>

ul#ustasub_scriptionis li <
margin-top: 1px;
>

ul#ustasub_scriptionis li a img <
vertical-align: middle;
padding: 0 5px 5px 0;
>

ul#ustasub_scriptionis li a <
background: #2a3956;
color: #fbefef;
padding: 13px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
transition: 0.2s;
font-family: ‘Roboto’, sans-serif;
font-size: 15px;
>

ul#ustasub_scriptionis li a:hover <
background: #112c5d;
>

ul#ustasub_scriptionis li ul li a <
background: #cfced0;
color: #353232;
padding-left: 18px;
>

ul#ustasub_scriptionis li ul li a:hover <
background: #d4d3d5;
padding-left: 25px;
>

$(‘#ustasub_scriptionis ul’).hide();
$(‘#ustasub_scriptionis ul:eq(1)’).show();

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

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

Источник

Создаем эффектное вертикальное меню на HTML5 и CSS3

Всем привет! Сегодня мы рассмотрим пример по созданию красивого вертикального меню на jQuery и CSS3, которое было создано в PSD Орманом Кларком (скачать .psd).

Мы будем использовать минимально возможное количество изображений – только для иконок возле названия. При желании, изображения можно объединить в спрайт при помощи SpriteRight.

Шаг 1. Базовая HTML-разметка

Сначала давайте создадим пустой HTML5 документ:

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

Шаг 2. Шрифты с изменяющимся размером

Для начала убедимся, что меню отображается правильно. Добавим следующие правла в файл css/styles.css . Они установят для списка отступы равные нулю, и удалят стиль списка:

Шаг 3. CSS стиль основного меню

Сейчас мы можем приступить к написанию стилей для меню. Мы установим ширину и высоту меню ul auto , и затем добавим тень. Благодаря автоматически устанавливаемой высоте, тень будет появляться, когда слайдер открывается. Далее, для анкоров мы добавим ширину 100%; это будет означать, что их размер будет равен размеру контейнера (в нашем случае 220px). Для указания их высоты мы будем использовать em, для этого вернемся к нашему основному размеру шрифта, равному 13px. В .psd файле размер шрифта установлен в 36px, так что это будет нашей целью. Мы берем 36, и делим его на 13, получается примерно 2.75em (36 / 13 = 2.76923077). Поэтому мы укажем размер анкоров равным 2.75em, и такую же высоту строки, чтобы выровнять текст по вертикали по центру. Затем добавим небольшой отступ, чтобы оставить место для иконки. Мы добавим CSS3 градиент для фона, потом поменяем шрифт (будем использовать Helvetica Neue) и добавим белую тень для шрифта. Обратите внимание, мы не используем font-size; так как мы установили размер шрифта для контейнера (в 13px), то он будет наследоваться.

Источник

Вертикальное раздвижное меню с описанием

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

Данное меню было разработано моим другом Глебом Кавраским. Давайте же приступим к рассмотрению урока.

Шаг 1. HTML

Для начала нам необходимо подключить библиотеку jquery-latest:

Далее нам надо построить саму разметку, для каждого основного контейнера с содержанием мы будем использовать классы «button_podtext».

C разметкой разобрались, переходим к следующему шагу.

Шаг 2. CSS

Нам необходимо создать градиентную заливку меню, кроме этого создать окантовку, тени, и установить параметры для шрифтов и подпунктов аккордеона:

#menu_pop < margin: 120px auto ; width: 280px; background: url('wood.jpg'); border-radius: 6px; padding: 7px; box-shadow: 0px 1px 5px #000; >#accordion < list-style: none; padding: 0px; margin: 0px; >#accordion .button_podtext < font-size: 9px; color: #b1b1b1; >#accordion div < display: block; cursor: pointer; text-decoration: none; display: block; padding: 8px 0px 8px 11px; background: #000; color: #fff; font-size: 12px; font-family: tahoma; background: url('bg.png') 0px 0px; text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6); list-style: circle; >#accordion div:hover < background: url('bg.png') 0px -44px; >.first < border-radius: 3px 3px 0px 0px; >#accordion ul a < color: #777; >#accordion ul < list-style: none; padding: 5px; font-size: 10px; font-family: Tahoma; background: #1a1a1a; box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7); display: none; >#accordion ul li < font-weight: normal; cursor: auto; padding: 3px 7px; >#accordion a < text-decoration: none; >#accordion a:hover < text-decoration: underline; >#menu_pop .menu_bottom

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

Шаг 3. jQuery

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

//Определяем по нажатию на какой элемент должны открыватся подменю $("#accordion > li > div").click(function() < if(false == $(this).next().is(':visible')) < $('#accordion ul').slideUp(280); >$(this).next().slideToggle(280); >); $('#accordion ul:eq(0)').show();

Кроме этого вы можете указать в данном фрагменте кода скорость открытия и закрытия подпунктов. По умолчанию она установления на значении 280мс.

Источник

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

Разметка HTML
Меню построено на неупорядоченном списке и имеет один уровень (очень часто, такого уровня вложенности хватает для решения задач интерфейса приложения).

  Главная
  HTML/CSS 
   Ссылка 1
   Ссылка 2
   Ссылка 3
   Ссылка 4
   Ссылка 5


  jQuery/JS 
   Ссылка 6
   Ссылка 7
   Ссылка 8
   Ссылка 9
   Ссылка 10


  PHP
  MySQL
  XSLT

Источник