以下是 jQuery&CSS图形下拉菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,菜单,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery&CSS图形下拉菜单，属于站长常用代码" />
<title>jQuery&CSS图形下拉菜单</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body style="text-align:center">
<div id="page">
<h1>Your Product</h1>
<form method="post" action="">
<!-- We are going to use jQuery to hide the select element and replace it -->
<select name="fancySelect" class="makeMeFancy">
<!-- Notice the HTML5 data attributes -->
<option value="0" selected="selected" data-skip="1">Choose Your Product</option>
<option value="1" data-icon="img/products/iphone.png" data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option>
<option value="2" data-icon="img/products/ipod.png" data-html-text="iPod <i>in stock</i>">iPod</option>
<option value="3" data-icon="img/products/air.png" data-html-text="MacBook Air<i>out of stock</i>">MacBook Air</option>
<option value="4" data-icon="img/products/imac.png" data-html-text="iMac Station<i>in stock</i>">iMac Station</option>
</select>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
JS代码(script.js):
$(document).ready(function(){
// The select element to be replaced:var select = $('select.makeMeFancy');
var selectBoxContainer = $('<div>',{
width:select.outerWidth(),className:'tzSelect',html:'<div class="selectBox"></div>'}
);
var dropDown = $('<ul>',{
className:'dropDown'}
);
var selectBox = selectBoxContainer.find('.selectBox');
// Looping though the options of the original select elementselect.find('option').each(function(i){
var option = $(this);
if(i==select.attr('selectedIndex')){
selectBox.html(option.text());
}
// As of jQuery 1.4.3 we can access HTML5// data attributes with the data() method.if(option.data('skip')){
return true;
}
// Creating a dropdown item according to the// data-icon and data-html-text HTML5 attributes:var li = $('<li>',{
html:'<img src="'+option.data('icon')+'" /><span>'+option.data('html-text')+'</span>'}
);
li.click(function(){
selectBox.html(option.text());
dropDown.trigger('hide');
// When a click occurs,we are also reflecting// the change on the original select element:select.val(option.val());
return false;
}
);
dropDown.append(li);
}
);
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
// Binding custom show and hide events on the dropDown:dropDown.bind('show',function(){
if(dropDown.is(':animated')){
return false;
}
selectBox.addClass('expanded');
dropDown.slideDown();
}
).bind('hide',function(){
if(dropDown.is(':animated')){
return false;
}
selectBox.removeClass('expanded');
dropDown.slideUp();
}
).bind('toggle',function(){
if(selectBox.hasClass('expanded')){
dropDown.trigger('hide');
}
else dropDown.trigger('show');
}
);
selectBox.click(function(){
dropDown.trigger('toggle');
return false;
}
);
// If we click anywhere on the page,while the// dropdown is shown,it is going to be hidden:$(document).click(function(){
dropDown.trigger('hide');
}
);
}
);
CSS代码(styles.css):
*{margin:0;padding:0;}
p{line-height:26px;}
body{color:#eee;background-color:#141414;font:15px Calibri,Arial,sans-serif;}
#page{width:230px;margin:100px auto;}
#page h1{font-weight:normal;text-indent:-99999px;overflow:hidden;background:url('../img/your_product.png') no-repeat;width:230px;height:36px;}
#page form{margin:20px auto;width:200px;}
.tzSelect{/* This is the container of the new select element */
height:34px;display:inline-block;min-width:200px;position:relative;/* Preloading the background image for the dropdown */
background:url("../img/dropdown_slice.png") no-repeat -99999px;}
.tzSelect .selectBox{position:absolute;height:100%;width:100%;/* Font settings */
font:13px/34px "Lucida Sans Unicode","Lucida Grande",sans-serif;text-align:center;text-shadow:1px 1px 0 #EEEEEE;color:#666666;/* Using CSS3 multiple backgrounds and a fallback */
background:url('../img/select_slice.png') repeat-x #ddd;background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png');background-position:0 -136px,right -204px,50% -68px,0 0;background-repeat:no-repeat,no-repeat,no-repeat,repeat-x;cursor:pointer;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.tzSelect .selectBox:hover,.tzSelect .selectBox.expanded{background-position:0 -170px,right -238px,50% -102px,0 -34px;color:#2c5667;text-shadow:1px 1px 0 #9bc2d0;}
.tzSelect .dropDown{position:absolute;top:40px;left:0;width:100%;border:1px solid #32333b;border-width:0 1px 1px;list-style:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-shadow:0 0 4px #111;-webkit-box-shadow:0 0 4px #111;box-shadow:0 0 4px #111;}
.tzSelect li{height:85px;cursor:pointer;position:relative;/* Again,using CSS3 multiple backgrounds with a fallback */
background:url('../img/dropdown_slice.png') repeat-x #222;background-image:url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png');background-position:50% -171px,0 -85px,0 0;background-repeat:no-repeat,no-repeat,repeat-x;}
.tzSelect li:hover{background-position:50% -256px,0 -85px,0 0;}
.tzSelect li span{left:88px;position:absolute;top:27px;}
.tzSelect li i{color:#999999;display:block;font-size:12px;}
.tzSelect li img{left:9px;position:absolute;top:13px;}
/* Page Styles */
#footer{background-color:#212121;position:fixed;width:100%;height:70px;bottom:0;left:0;}
a.tzine,a.tzine:visited{background:url("../img/tzine.png") no-repeat right top;border:none;color:#FCFCFC;font-size:12px;height:70px;left:50%;line-height:31px;margin:23px 0 0 110px;position:absolute;top:0;width:290px;}
.tri{border-color:transparent transparent #212121;border-style:solid;border-width:20px 17px;height:0;left:50%;margin:-40px 0 0 -400px;position:absolute;top:0;width:0;}
#footer h1{font-size:20px;font-weight:normal;left:50%;margin-left:-400px;padding:25px 0;position:absolute;width:400px;}
a,a:visited{text-decoration:none;outline:none;border-bottom:1px dotted #97cae6;color:#97cae6;}
a:hover{border-bottom:1px dashed transparent;}
.clear{clear:both;}
分享到QQ
分享到微博
微信扫一扫
