Вертикальное меню на CSS 3
Сделаем вертикальное меню с возможностью переключения цвета и 3D эффектом при разворачивании подпунктов. Используется только CSS3.
Разметка HTML
Меню основано на типовой структуре с неупорядоченным списком. Перед меню вставим элементы для переключения цвета.
index.html
<div class="container"> <span id="clr1"></span> <span id="clr2"></span> <span id="clr3"></span> <span id="clr4"></span> <span id="clr5"></span> <span id="clr6"></span> <div class="colorScheme"> <a href="#clr1" class="clr1"></a> <a href="#clr2" class="clr2"></a> <a href="#clr3" class="clr3"></a> <a href="#clr4" class="clr4"></a> <a href="#clr5" class="clr5"></a> <a href="#clr6" class="clr6"></a> </div> <ul id="nav"> <li><a href="http://www.script-tutorials.com/">Главная</a></li> <li><a href="#">Меню 1</a> <ul class="subs"> <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></li> </ul> </li> <li><a href="#">Меню 2</a> <ul class="subs"> <li><a href="#">Подпункт 2-1</a></li> <li><a href="#">Подпункт 2-2</a></li> <li><a href="#">Подпункт 2-3</a></li> <li><a href="#">Подпункт 2-4</a></li> <li><a href="#">Подпункт 2-5</a></li> <li><a href="#">Подпункт 2-6</a></li> <li><a href="#">Подпункт 2-7</a></li> <li><a href="#">Подпункт 2-8</a></li> </ul> </li> <li><a href="#">Меню 3</a> <ul class="subs"> <li><a href="#">Подпункт 3-1</a></li> <li><a href="#">Подпункт 3-2</a></li> <li><a href="#">Подпункт 3-3</a></li> <li><a href="#">Подпункт 3-4</a></li> <li><a href="#">Подпункт 3-5</a></li> </ul> </li> <li><a href="#">Меню 4</a></li> <li><a href="#">Меню 5</a></li> <li><a href="#">Меню 6</a></li> <li><a href="http://ruseller.com/lessons.php?rub=2&id=1405">К уроку</a></li> </ul> </div>
CSS
Стили меню содержатся в отдельном файле menu.css. В файле layout.css содержатся стили для демонстрационной страницы.
menu.css
#nav,#nav ul { background-color: #8899AA; list-style: none outside none; margin: 0; padding: 0; } #nav { display: block; padding: 5px; position: relative; width: 112px; -moz-perspective: 200px; -ms-perspective: 200px; -webkit-perspective: 200px; -o-perspective: 200px; perspective: 200px; } #nav ul { left: -9999px; opacity:0; overflow: hidden; padding: 5px; position: absolute; top: -9999px; -moz-transform: rotateY(70deg); -ms-transform: rotateY(70deg); -o-transform: rotateY(70deg); -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear; -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear; -o-transition: -o-transform 0.3s linear, opacity 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear; transition: transform 0.3s linear, opacity 0.3s linear; } #nav li { background-color: #FFFFFF; position: relative; } #nav > li { -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } #nav li a { background-color: #AABBCC; border-color: #DDDDDD #555555 #555555 #DDDDDD; border-style: solid; border-width: 1px; color: #000000; display: block; font-size: 15px; padding: 8px 10px 8px 5px; text-decoration: none; width:95px; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } #nav li:hover > a { background-color: #8899AA; border-color: #8899AA; color: #FFFFFF; } #nav li:hover ul.subs { left: 114px; opacity:1; top: 0; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } #nav ul li { width: 100%; } /* Цвета */ .colorScheme { list-style: none outside none; overflow: hidden; width: 120px; } .colorScheme a { cursor: pointer; float: left; height: 30px; margin: 0 5px 5px; width: 30px; } .colorScheme .clr1 { background-color: #8899AA; } .colorScheme .clr2 { background-color: #aa889e; } .colorScheme .clr3 { background-color: #8f88aa; } .colorScheme .clr4 { background-color: #88aaaa; } .colorScheme .clr5 { background-color: #88aa8a; } .colorScheme .clr6 { background-color: #aaa188; } #clr1:target ~ #nav, #clr1:target ~ #nav ul { background-color: #8899AA; } #clr2:target ~ #nav, #clr2:target ~ #nav ul { background-color: #aa889e; } #clr3:target ~ #nav, #clr3:target ~ #nav ul { background-color: #8f88aa; } #clr4:target ~ #nav, #clr4:target ~ #nav ul { background-color: #88aaaa; } #clr5:target ~ #nav, #clr5:target ~ #nav ul { background-color: #88aa8a; } #clr6:target ~ #nav, #clr6:target ~ #nav ul { background-color: #aaa188; } #clr1:target ~ #nav li:hover > a { background-color: #8899AA; border-color: #8899AA; } #clr2:target ~ #nav li:hover > a { background-color: #aa889e; border-color: #aa889e; } #clr3:target ~ #nav li:hover > a { background-color: #8f88aa; border-color: #8f88aa; } #clr4:target ~ #nav li:hover > a { background-color: #88aaaa; border-color: #88aaaa; } #clr5:target ~ #nav li:hover > a { background-color: #88aa8a; border-color: #88aa8a; } #clr6:target ~ #nav li:hover > a { background-color: #aaa188; border-color: #aaa188; }
Готово!
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/QdEkueRleFM/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Не делай другим то, что ты хотел бы, чтобы они делали для тебя. У вас могут быть разные вкусы Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.