Все для веб-дизайнера
Создаем концепт выпадающего меню для сайта
Создание сайта начинается с разработки концепции на бумаге, обдумки всех мелочей и частиц сайта. Но каждый разработчик хочет сделать не просто сайт, а нечто уникальное, которое будет притягивать взор посетителей необычным решением той или иной задачи. С таким мнением мы подошли к реализации следующего урока в котором мы рассмотрим как создать концептуальное меню для сайта с использованием css и jquery. Несмотря на то, что это всего лишь концепт, но он успешно работает во всех последних версиях браузера, включая ослика IE, проверено мною лично.
Шаг 1. HTML
Приведенный ниже код не требует объяснения, так что я просто оставлю его здесь. Использование класса .submenu требуется для избавления от селектора .menu ul:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ul class="menu cf"> <li><a href="#">Главная</a></li> <li> <a href="#">Уроки</a> <ul class="submenu"> <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></li> <li><a href="#">Советы</a></li> <li><a href="#">О нас</a></li> </ul> |
Кроме того, .cf для очистки обтекания (clearfix).
Шаг 2. CSS
Для начала необходимо добавить элементы очистки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } |
Затем сбрасываем отступы и стиль маркированного списка:
|
1 2 3 4 5 6 |
.menu, .submenu { margin: 0; padding: 0; list-style: none; } |
Основной код который отвечает за выпадание списка и позиционирование элементов:
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
.menu { margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } .menu > li { background: #34495e; float: left; position: relative; -webkit-transform: skewX(25deg); } .menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px; } .menu li:hover { background: #e74c3c; } .menu > li > a { -webkit-transform: skewX(-25deg); padding: 1em 2em; } /* Dropdown */ .submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; -webkit-transform: skewX(-25deg); -webkit-transform-origin: left top; } .submenu li { background-color: #34495e; position: relative; overflow: hidden; } .submenu > li > a { padding: 1em 2em; } .submenu > li::after { content: ''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9); } /* Odd stuff */ .submenu > li:nth-child(odd){ -webkit-transform: skewX(-25deg) translateX(0); } .submenu > li:nth-child(odd) > a { -webkit-transform: skewX(25deg); } .submenu > li:nth-child(odd)::after { right: -50%; -webkit-transform: skewX(-25deg) rotate(3deg); } /* Even stuff */ .submenu > li:nth-child(even){ -webkit-transform: skewX(25deg) translateX(0); } .submenu > li:nth-child(even) > a { -webkit-transform: skewX(-25deg); } .submenu > li:nth-child(even)::after { left: -50%; -webkit-transform: skewX(25deg) rotate(3deg); } /* Show dropdown */ .submenu, .submenu li { opacity: 0; visibility: hidden; } .submenu li { transition: .2s ease -webkit-transform; } .menu > li:hover .submenu, .menu > li:hover .submenu li { opacity: 1; visibility: visible; } .menu > li:hover .submenu li:nth-child(even){ -webkit-transform: skewX(25deg) translateX(15px); } .menu > li:hover .submenu li:nth-child(odd){ -webkit-transform: skewX(-25deg) translateX(-15px); } |
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 07.08.2013 в 14:15, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
