07
Dec
1
Dec
1
Skapa en snygg och praktiskt dropdown meny med CSS och jQuery
Då och då skapar jag färdiga standardkomponenter som kan vara användbart att återanvända i olika typer av projekt. Idag ska jag visa en smidig dropdown meny. Det vanligaste är att när man har musen över menyn så vecklas dropdown menyn ut. I det här fallet hade jag kravet att skapa en dropdown meny som triggas när man trycker på ett menyval. Det fanns en del komplikationer när jag gjorde den här. Några av dem var att man ska kunna trycka bort dropdown menyn överallt på sidan och inte endast på menyvalet, menyn ska vara aktiv när menyn är utfälld. Pilar ska visa vilka menyval som har dropdown funktionen.
Grund HTML
Här kommer grunduppsättningen för html’en. Ganska så basic.
<!DOCTYPE html> <html lang="en"> <head> <title>Red Riding Hood Dropdown Menu</title> </head> <body> <div class="wrap"> </div> </body> </html>
HTML för menyn
Den här är ganska så lång men det mesta är bara kopierat och återanvänt. Dock så kommer du få använda en hack för att bryta float genom att använda Nicolas Gallagher smidiga micro clearfix. Den sätter vi på ytter UL taggen.
<div class="menu">
<ul class="cf">
<li><a href="#" class="home" title="Home"> </a></li>
<li><a href="#" class="dropdownShow">Features</a>
<ul class="dropdownWrap">
<li>
<ul>
<li><h2>Browser Coverage</h2></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul>
<li><h2>Browser Coverage</h2></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="dropdownShow">FAQ</a>
<ul class="dropdownWrap">
<li>
<ul>
<li><h2>Browser Coverage</h2></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="dropdownShow">Plans & Pricing</a>
<ul class="dropdownWrap">
<li>
<ul>
<li><h2>Browser Coverage</h2></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">What we do</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Help/Support</a></li>
<li><a href="#" class="signIn">Sign In</a></li>
</ul>
</div>
CSS
En hel hög med CSS.
/* Micro clearfix hack */
cf:before, .cf:after { content:"";display:table;} .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */.cf { zoom:1; }
/* Style for the menu */
div.menu {
-khtml-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;
-webkit-box-shadow: 0 1px 2px rgb(149,149,149); -moz-box-shadow: 0 1px 2px rgb(149,149,149); box-shadow: 0 1px 2px rgb(149,149,149);
background: url(img/menu-bg.gif);
}
div.menu ul { position: relative; }
div.menu ul li {
display:inline;
float: left;
border-right: 1px solid #fd3357;
position: relative;
}
div.menu ul li a {
padding: 12px 20px 12px 16px;
display: block;
border-right: 1px solid #bd0022;
text-shadow: 0px 1px 6px #93001a;
text-decoration:none;
font-weight: 600;
color:#ecedee;
outline:none;
font-size: 11px;
}
div.menu ul li a:hover, div.menu ul li a.dropdown-active {
color:#fff;
text-shadow: 0px 1px 12px #fd3357;
background: #d90027;
}
div.menu ul li a:hover > ul {
display:block;
}
div.menu ul li a.dropdownShow {
background: url(img/arrowDown.png) no-repeat 93% 17px;
}
div.menu ul li a.dropdownShow:hover {
background: url(img/arrowDown.png) no-repeat 93% 17px #d90027;
}
div.menu ul li a.dropdown-active {
background: url(img/arrowUp.png) no-repeat 93% 17px #d90027!important;
}
div.menu ul li a.home {
width:16px
height:16px;
background: url(img/home.png) center no-repeat;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);-moz-opacity:0.8; -khtml-opacity:0.8;opacity: 0.8;
}
div.menu ul li a.home:hover {
background: url(img/home.png) center no-repeat;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity:1; -khtml-opacity: 1;opacity: 1;
}
/* Level 2 */
div.menu ul li ul.dropdownWrap {
display:none;
position: absolute;
left:0px;
top: 39px;
width: auto;
padding: 10px 10px 0;
background: #d90027;
-webkit-box-shadow: 0 1px 2px rgb(149,149,149); -moz-box-shadow: 0 1px 2px rgb(149,149,149); box-shadow: 0 1px 2px rgb(149,149,149);
-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;
}
div.menu ul li ul.dropdownWrap li, div.menu ul li ul.dropdownWrap li a {
border:none;
}
div.menu ul li ul.dropdownWrap li ul {
width: 120px;
margin-bottom: 10px;
}
/* Level 2 -> List Menu */
div.menu ul li ul.dropdownWrap li ul li {
float: none;
text-shadow: 0px 1px 4px #93001a;
}
div.menu ul li ul.dropdownWrap li ul li h2 {
font-size:11px;
margin-bottom:5px;
}
div.menu ul li ul.dropdownWrap li ul li a {
padding:2px 4px;
font-weight: 400;
border-bottom:1px solid #E82949;
background: none;
-khtml-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius:3px;
}
div.menu ul li ul.dropdownWrap li ul li a:hover {
border-bottom:1px solid #F93455;
font-weight: 600;
background:#A3011C;
}
jQuery
Uppsättningen för jQuery skriptet.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active';
/* recurse through dropdown menus */
$('.menu').each(function() {
/* track elements: menu, parent */
var activeClass = "dropdown-active";
var $menu = $(this);
var dropdowns = $('.dropdownShow', $menu);
var allWraps = $('.dropdownWrap', $menu);
/* hide all menus, scoped */
function hideAll() {
dropdowns.removeClass(activeClass);
allWraps.hide();
}
dropdowns.each(function(){
var dropdown = $(this);
var parent = dropdown.parent();
var wraps = $('.dropdownWrap', parent);
/* function to show menu when clicked */
dropdown.click(function(e) {
if (dropdown.hasClass(activeClass)) {
dropdown.removeClass(activeClass);
wraps.hide();
}
else {
hideAll();
dropdown.addClass(activeClass);
wraps.show();
}
e.stopPropagation();
});
});
$(document).click(hideAll);
});
});
</script>
Sammanfattning
Detta exemepl är bara ett av många olika varianter man kan göra med skriptet. Man skulle kunna göra en horisontell meny eller bara en box som behöver öppnas eller stängas. Hoppas du har nytta av skriptet.
Johan jobbar som Interaktiondesigner på Cypoint där han får syssla med interaktionsdesign, webbdesign och visuell kommunikation som är riktat till E-handel, webb och mobila lösningar. Se mer om Johan Pettersson.
Relaterade inlägg
internet marketing (December 31, 2011 at 02:22)
Önskar att alla kunde få vara lediga lite längre men imorgon drar allt igång igen, jag har massa plugg som ska göras. Deadline på fredag kl 12..Whhoooppp!