css手风琴

来源：互联网发布：全国乡镇街道数据库编辑：程序博客网时间：2024/06/01 09:00

<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>

</div>

$(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>

0 0