<style>
* { font-family: "museo500", "Arial"; font-size: 12px; list-style: none; margin: 0; padding: 0; outline: 0; text-decoration: none; box-sizing: border-box !important; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; -ms-box-sizing: border-box !important; } /** * START FREEBIE STYLES */ /*! Font Faces */ @font-face{ font-family: 'museo500'; src: url('../fonts/MuseoSans_500-webfont.eot'); src: url('../fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/MuseoSans_500-webfont.woff') format('woff'), url('../fonts/MuseoSans_500-webfont.ttf') format('truetype'), url('../fonts/MuseoSans_500-webfont.svg#museo_sans_500regular') format('svg'); font-weight: normal; font-style: normal; } /*! Freebie Skelet */ ul.expmenu { width: 200px; } ul.expmenu * { list-style: none; } ul.expmenu > li > div.header { padding: 12px; border-bottom: 1px #396e9f solid; } ul.expmenu > li:last-child > div.header { border-bottom: none; } ul.expmenu > li ul li { background-color: #ececec; padding: 12px; border-bottom: 1px solid #dcdcdc; border-top: 1px solid #fff; color: #727272; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); } ul.expmenu > li ul li:last-child { border-bottom: none; } ul.expmenu > li ul li.selected { background-color: #f4f4f4; } ul.expmenu div.header { color: #203f61; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2); background: #4d7fb8; /* Old browsers */ background: -moz-linear-gradient(top, #4d7fb8 0%, #4572a5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4572a5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* IE10+ */ background: linear-gradient(to bottom, #4d7fb8 0%,#4572a5 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4572a5',GradientType=0 ); /* IE6-9 */ } ul.expmenu > li > div.header > .label { padding-left: 24px; background: no-repeat; } ul.expmenu > li > div.header > .arrow { display: block; width: 16px; height: 16px; background: no-repeat center; float: right; } ul.expmenu > li > div.header > .arrow.up { background-image: url(../images/arrow_u.png); } ul.expmenu > li > div.header > .arrow.down { background-image: url(../images/arrow_d.png); } /* Mouse Events */ ul.expmenu div.header:hover { background: #4571a0; /* Old browsers */ background: -moz-linear-gradient(top, #4d7fb8 0%, #4571a0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4571a0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* IE10+ */ background: linear-gradient(to bottom, #4d7fb8 0%,#4571a0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4571a0',GradientType=0 ); /* IE6-9 */ cursor: pointer; } ul.expmenu > li ul li:not(.selected):hover { background: #e7e7e7; /* Old browsers */ cursor: pointer; } ul.expmenu > li ul li:not(.selected):active { background: #f1f1f1; /* Old browsers */ cursor: pointer; } /** * END FREEBIE STYLES */ /** * Not important styles */ body { color: #b1b1b1; background: #e1e1e1; /* Old browsers */ font-family: "museo500"; } ul#pagination-freebie { display: table; padding-right: 20px; margin: 20px auto; list-style: none; } ul#pagination-freebie:last-child { padding-right: 0; } ul#pagination-freebie li { float: left; margin-bottom: 20px } ul#pagination-freebie li:last-child { margin-right: 0; } div#text { text-align: center; font-size: 48px; width: 610px; margin: 0 auto; margin-top: 50px; margin-top: 80px; } div#smalltext { text-align: center; font-size: 15px; width: 600px; margin: 0 auto; } div#content { display: table; margin: 0 auto; padding: 30px; }
.slider { background: #d5d5d5; height: 7px; position: relative; cursor: pointer; width: 100%; clear: right; top: 0px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: inset 0 0 8px #000; margin: 10px 0 10px 0; } /* progress bar (enabled with progress: true) */ .progress { height: 7px; position: relative; background: #5389c5; /* Old browsers */ background: -moz-linear-gradient(top, #5389c5 0%, #4775a9 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5389c5), color-stop(100%,#4775a9)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* IE10+ */ background: linear-gradient(to bottom, #5389c5 0%,#4775a9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5389c5', endColorstr='#4775a9',GradientType=0 ); /* IE6-9 */ -moz-border-radius: 5px; -webkit-border-radius: 5px; top: 0px; border: 1px solid #4b7bb1; -moz-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3); -webkit-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3); box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3); } /* drag handle */ .handle { background: url(../images/handle.png) repeat-x center; height: 16px; width: 16px; top: -5px; position: absolute; display: block; margin-top: 1px; cursor: pointer; } /* the input field */ .range { display: none; }
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script> </head> <body> <div id="text">jquery扩展金属导航<div style="font-size: 15px; float: right; clear:both;"></div></div> <div id="content"> <ul id="expmenu-freebie"> <li> <!-- Start Freebie --> <ul class="expmenu"> <li> <div class="header"> <span class="label" style="background-image: url(images/messages.png);">Messages</span> <span class="arrow up"></span> </div> <ul class="menu"> <li>Notification Settings</li> <li class="selected">Email Alerts</li> <li>Privacy Settings</li> </ul> </li> <li> <div class="header"> <span class="label" style="background-image: url(images/user.png);">User Controls</span> <span class="arrow up"></span> </div> <ul class="menu"> <li><input type="range" name="range" min="0" max="100" value="35" style="width: 100%;" /></li> </ul> </li> <li> <div class="header"> <span class="label" style="background-image: url(images/pc.png);">Screen Settings</span> <span class="arrow down"></span> </div> <ul class="menu" style="display:none"> <li>Your settings</li> </ul> </li> <li> <div class="header"> <span class="label" style="background-image: url(images/search.png);">Search</span> </div> </li> </ul> <!-- End Freebie --> </li> </ul></div>
<script>
$(document).ready(function(){ $(":range").rangeinput({progress: true}); /* Slide Toogle */ $("ul.expmenu li > div.header").click(function() { var arrow = $(this).find("span.arrow"); if(arrow.hasClass("up")) { arrow.removeClass("up"); arrow.addClass("down"); } else if(arrow.hasClass("down")) { arrow.removeClass("down"); arrow.addClass("up"); } $(this).parent().find("ul.menu").slideToggle(); }); });
</script>
</body> </html>
