Домой / Для сайта / Горизонтальное выпадающее меню
Горизонтальное выпадающее меню

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

Отличное горизонтальное выпадающее меню. Конечно, возможно кто-то предпочитает создавать горизонтальное меню без использования JS, а на чистом CSS.

Но я надеюсь, что данный способ реализации меню не оставит вас равнодушными.

Демо

HTML


<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<div id="wrapper">
<h1><i class='icon-sort-by-attributes'></i> CSS3 <span>Card Deck Drop Down</span></h1>
<div class="card-drop">
<a class='toggle' href="#">
<i class='icon-suitcase'></i>
<span class='label-active'>Everyting</span>
</a>
<ul>
<li class='active'>
<a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Everyting</a>
</li>
<li>
<a data-label="Design" href="#"><i class='icon-magic'></i> Design</a>
</li>
<li >
<a data-label="UI-UX" href="#"><i class='icon-bolt'></i> UI-UX</a>
</li>
<li>
<a data-label="Print" href="#"><i class='icon-tint'></i> Print</a>
</li>
<li>
<a data-label="Photography" href="#"><i class='icon-camera-retro'></i> Phtography</a>
</li>

</ul>
</div>
</div>

CSS


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}

html {
line-height: 1;
}

ol, ul {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}

q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}

a img {
border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}

body {
background-color: #F2EFE9;
overflow: hidden;
padding-top: 40px;
font-family: helvetica, arial, sans-serif;
font-size: 1em;
}

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

#wrapper {
width: 680px;
margin: 0 auto;
}

h1 {
font-size: 2.5em;
text-align: center;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.4em;
color: #4e6a6a;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
font-family: helvetica, arial, sans-serif;
}
h1 span {
font-weight: lighter;
}

.card-drop {
max-width: 300px;
position: relative;
margin: 0 auto;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}
.card-drop a {
display: block;
width: 100%;
background-color: salmon;
padding: 20px 0 20px 20px;
height: 60px;
text-decoration: none;
color: #1e2929;
background-color: #5f8181;
border-bottom: 1px solid #4e6a6a;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.card-drop a i {
display: inline-block;
width: 20px;
}
.card-drop > a.toggle {
position: relative;
z-index: 300;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transition: 0.1s linear;
-o-transition: 0.1s linear;
-webkit-transition: 0.1s linear;
transition: 0.1s linear;
background-color: #729797;
}
.card-drop > a.toggle:active {
-moz-transform: rotateX(60deg);
-webkit-transform: rotateX(60deg);
transform: rotateX(60deg);
}
.card-drop > a.toggle.active:before {
content: "\f0d8";
}
.card-drop > a.toggle:before {
font-family: 'FontAwesome';
content: '\f0d7';
font-size: 1.3em;
color: #344646;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
position: absolute;
right: 0;
top: 0;
height: 59px;
line-height: 60px;
width: 60px;
text-align: center;
display: block;
border-left: 1px solid #4e6a6a;
}
.card-drop ul {
position: absolute;
height: 100%;
top: 0;
display: block;
width: 100%;
}
.card-drop ul li {
margin: 0 auto;
-moz-transition: all, 0.3s ease-out;
-o-transition: all, 0.3s ease-out;
-webkit-transition: all, 0.3s ease-out;
transition: all, 0.3s ease-out;
position: absolute;
top: 0;
z-index: 0;
width: 100%;
}
.card-drop ul li a:hover {
background-color: #6a9090;
color: #dce5e5;
}
.card-drop ul li.active a {
color: #95b1b1;
background-color: #547272;
cursor: default;
}
.card-drop ul li.closed a:hover {
cursor: default;
background-color: #5f8181;
}

JavaScript


(function($){
/* -------------------------------------------------------- */
/* //set Global variables
/* -------------------------------------------------------- */
var cards = $(".card-drop"),
toggler = cards.find(".toggle"),
links = cards.find("ul>li>a"),
li = links.parent('li'),
count = links.length,
width = links.outerWidth();

//set z-Index of drop Items
links.parent("li").each(function(i){
$(this).css("z-index" , count - i); //invert the index values
});

//set top margins & widths of li elements
function setClosed(){
li.each(function(index){
$(this).css("top" , index *2)
.css("width" , width - index *2)
.css("margin-left" , (index*2)/2);
});
li.addClass('closed');
toggler.removeClass("active");
}
setClosed();

/* -------------------------------------------------------- */
/* Toggler Click handler
/* -------------------------------------------------------- */
toggler.on("mousedown" , function(){
var $this = $(this); //cache $(this)
//if the menu is active:
if($this.is(".active")){
setClosed();
}else{
//if the menu is un-active:
$this.addClass("active");
li.removeClass('closed');
//set top margins
li.each(function(index){
$(this).css("top" , 60 * (index + 1))
.css("width" , "100%")
.css("margin-left" , "0px");
});
}
});

/* -------------------------------------------------------- */
/* Links Click handler
/* -------------------------------------------------------- */
links.on("click" , function(e){
var $this = $(this),
label = $this.data("label");
icon = $this.children("i").attr("class");

li.removeClass('active');
if($this.parent("li").is("active")){
$this.parent('li').removeClass("active");
}else{
$this.parent("li").addClass("active");
}
toggler.children("span").text(label);
toggler.children("i").removeClass().addClass(icon);
setClosed();
e.preventDefault;
});

})(jQuery);


Отличное горизонтальное выпадающее меню. Конечно, возможно кто-то предпочитает создавать горизонтальное меню без использования JS, а на чистом CSS. Но я надеюсь, что данный способ реализации меню не оставит вас равнодушными. HTML &lt;link href=&quot;//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;div id=&quot;wrapper&quot;&gt; &lt;h1&gt;&lt;i class='icon-sort-by-attributes'&gt;&lt;/i&gt; CSS3 &lt;span&gt;Card Deck Drop Down&lt;/span&gt;&lt;/h1&gt; &lt;div class=&quot;card-drop&quot;&gt; &lt;a class='toggle' href=&quot;#&quot;&gt; &lt;i class='icon-suitcase'&gt;&lt;/i&gt; &lt;span class='label-active'&gt;Everyting&lt;/span&gt; &lt;/a&gt; &lt;ul&gt; &lt;li class='active'&gt; &lt;a data-label=&quot;Everyting&quot; href=&quot;#&quot;&gt;&lt;i class='icon-suitcase'&gt;&lt;/i&gt; Everyting&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a data-label=&quot;Design&quot; href=&quot;#&quot;&gt;&lt;i class='icon-magic'&gt;&lt;/i&gt; Design&lt;/a&gt; &lt;/li&gt; &lt;li &gt; &lt;a data-label=&quot;UI-UX&quot; href=&quot;#&quot;&gt;&lt;i class='icon-bolt'&gt;&lt;/i&gt; UI-UX&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a data-label=&quot;Print&quot; href=&quot;#&quot;&gt;&lt;i class='icon-tint'&gt;&lt;/i&gt; Print&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a data-label=&quot;Photography&quot; href=&quot;#&quot;&gt;&lt;i class='icon-camera-retro'&gt;&lt;/i&gt; Phtography&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.58 ( 2 голосов )
90

Один комментарий

  1. Здравствуйте ещё раз, хотела оставить комментарий в свойствах но после добавления, страница зависла и больше не открылась, ни в одном из браузеров. Попробую тут)

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

    1. У меня каким-то образом исчезла корзина. Черз юрл могу в неё попасть ,но в шапке её нет. Также исчезли все кнопки «В корзину» (осталась только в списке желаний) и опции. Это произошло после того, как я удалила навсегда какую-то страницу (не помню какую, в самом начале было). Но страница самой корзины есть. Не сталкивались с таким? В какую сторону мне «копать»?

    2. Нет ли каких-то возможностей поменять свойства в выпадающем списке (при добавлении товара) в нужном порядке. Например, я добавила свойство «цвет», а через какое-то время мне стало нужно свойство «размер». И теперь, при добавлении товара, они, в выпадающем списке, так и будут идти друг за другом: цвет, потом размер. А когда их 20, неудобно выбирать, хочется по своему усмотрению установить, чтобы потом не пришлось перетягивать. Есть ли какое-то решение?

    3. Я для фильтрации оставила свойства от WC. Всё работает, но! Выбирая «и», оно работает как «или», то есть, не ждёт пока я ещё выберу другие свойства, а сразу перегружает страницу по одному свойству. Почему?

    4. маленький вопрос — почему во всех свойствах ,кроме брендов, по две пары скобок около количества товара? у брендов всё нормально, а у остальных, такая неприятность 🙂

    Спасибо за любой ответ!

Оставить комментарий

Ваш email не будет опубликован.

*