Уеб сайт за ИТ и електроник размисли

22окт/130

Респонсив меню

Тъй, като се наложи да направя първият си респонсив дизайн започнах с реализацията на менюто.  Към монета са доста модерни големите менюта (Mega Menu) . Поради тази причина трябваше да съчетая обикновено падащо (drop down) меню с голямо меню.  За реализацията са използвани HTML, CSS, jQuery и css media queries.

В примера е използван последната версия на jQuery: jQuery jquery-1.10.2.min.js

Както е всеизвестно браузърите на Майкрософ преди версия 9 не поддържат media queries, за тази цел е нужно да се добави и скрипт (javascript) за фиксиране на този проблем. В Интернет има множество решения.

В следващите редове ще покажа нужния код;

JQuery

$(document).ready(function() {

$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("arrow");
};
})

$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();

$(window).bind('resize orientationchange', function() {
adjustMenu();
});
})

var adjustMenu = function() {
var ww = document.body.clientWidth;
if (ww < 480) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.arrow").unbind('click').bind('click', function(e) {
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
} else if (ww >= 480) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});
}
}

 

CSS

/*css*/
.toggleMenu {display:none;background:#666;padding:10px 15px;color:#fff;}

.nav {
list-style: none;
*zoom: 1;
margin: 0;
padding: 0;
position: relative;
}
.nav:before, .nav:after {
clear: both;
content: "";
display: block;
}

.nav ul {list-style: none;}
.nav a {padding: 10px 15px;color:#fff;}
.nav li {position: relative;}
.nav > li {float: left;}
.nav > li > a {display:block;}
.nav li ul {
position: absolute;
display: none;
}
.nav > li.hover > ul {display: block;}
.nav li li.hover ul {
display: block;
left: 100%;
top: 0;
}

.nav li li a {
display: block;
color:#777;
background-color: #ffffff;
position: relative;
z-index:100;
}
.nav li li li a {
position: relative;
display: block;
color:#777;
background-color: #ffffff;
z-index:200;
}

/*megamenu*/
.nav ul.mega-menu {width: 40em;}
.nav ul.mega-menu div.col {
background-color: #ffffff;
float:left;
padding:20px;
position: relative;
}
.nav ul.mega-menu div h4 {
font-size:14px;
font-weight:700;
color:#404040;
border-bottom:1px solid #e4e4e4;
padding:0 0 8px 0;
margin:0 0 10px 0
}
.nav ul.mega-menu ol{list-style:none;padding:0}
.nav ul.mega-menu ol li a {
color:#777;
font-size:12px;
padding:0;
font-weight:400;
background-color:#fff;
padding: 5px 0;
}
.nav ul.mega-menu ol li a:hover{color:#505050}

.nav li .arrow {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}

@media screen and (max-width: 480px) {
.active {display: block;}
.nav > li {float: none;}

.nav > li > a {display:inline-block;}

.nav ul {display: block;width: 100%;}
.nav > li.hover > ul,
.nav li li.hover ul {
position: static;
}

.nav ul.mega-menu {
width: 100%;
}

.nav ul.mega-menu div.col {
float:left;
width: 100%;
padding: 10px 0;
position: relative;
}
}

 

HTML

<!-- Mega Menu / Start
================================================== -->
<a href="#">Menu</a>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Full Width</a>
<!-- Full Width Mega-Menu / Start -->
<ul><li>
<div>
<h4>Web Hosting</h4>
<ol>
<li><a href="#">Distributed Storage</a></li>
<li><a href="#">Linux Hosting</a></li>
<li><a href="#">Windows Hosting</a></li>
<li><a href="#">Amazon S3</a></li>
<li><a href="#">Virtualization</a></li>
</ol>
</div>
<div>
<h4>VPS / VDS</h4>
<ol>
<li><a href="#">Parallels Panel</a></li>
<li><a href="#">Plesk Solutions</a></li>
<li><a href="#">SaaS Center</a></li>
<li><a href="#">Small Business</a></li>
<li><a href="#">Forex VPS</a></li>
</ol>
</div>
<div>
<h4>Cloud Hosting</h4>
<ol>
<li><a href="#">Providers</a></li>
<li><a href="#">Ultimate Plan</a></li>
<li><a href="#">Distributed Storage</a></li>
<li><a href="#">VPS Providers</a></li>
<li><a href="#">Cloud Reseller</a></li>
</ol>
</div>
</li></ul>
<!-- Full Width Mega-Menu / End -->
</li>
<li>
<a href="#">Lists</a>

<!-- Mega Menu / Start -->
<ul><li>
<div>
<h4>Web Hosting</h4>
<ol>
<li><a href="#">Distributed Storage</a></li>
<li><a href="#">Linux Hosting</a></li>
<li><a href="#">Windows Hosting</a></li>
<li><a href="#">Amazon S3</a></li>
<li><a href="#">Virtualization</a></li>
</ol>
</div>
<div>
<h4>VPS / VDS</h4>
<ol>
<li><a href="#">Parallels Panel</a></li>
<li><a href="#">Plesk Solutions</a></li>
<li><a href="#">SaaS Center</a></li>
<li><a href="#">Small Business</a></li>
<li><a href="#">Forex VPS</a></li>
</ol>
</div>
</li></ul>
<!-- Mega Menu / End -->
</li>

<li>
<a href="#">Basic</a>
<!-- Drop-Down / Start  -->
<ul>
<li><a href="#">VPS Providers</a></li>
<li><a href="#">IT Professionals</a></li>
<li><a href="#">Documentation</a>
<!--    Drop-Down / Start -->
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Knowledgebase</a></li>
<li><a href="#">Technology</a></li>
</ul>
<!--    Drop-Down / End -->
</li>
<li><a href="#">Functions</a></li>
</ul>
<!--Drop-Down / End -->
</li>

</ul>
<!-- Mega Menu / End ================================================== -->

Публикувано от Мариан Андреев

Коментари (0) Връзки за обратно следене (0)

Няма все още коментари.


Leave a comment

(required)

 

Все още няма връзки за обратно следене.