omidparkour
جمعه 10 مرداد 1393, 20:16 عصر
برا منو هم کد های زیر رو دادم
<ul class="topnav"> <li><a href="#">قالب ها</a> <ul> <li><a href="#">قالب های فلت</a> <ul> <li><a href="#">آبی</a> </li> <li><a href="#">نارنجی</a> </li> <li><a href="#">قرمز</a> </li> <li><a href="#">تیزه</a> </li> </ul> </li> <li><a href="#">قالب های سه بعدی</a> <ul> <li><a href="#">آبی</a> </li> <li><a href="#">نارنجی</a> </li> <li><a href="#">قرمز</a> </li> <li><a href="#">تیزه</a> </li> </ul> </li> </ul> </li> <li><a href="#">فروشگاه</a> </li> <li><a href="#">دست نوشته ها</a> </li> <li><a href="#">قالب های فروخته شده</a> </li> <li><a href="#"> وبمستر</a> </li> <li><a href="#">آموزش</a> </li> <li><a href="#">دانلود</a> </li> </ul>
.topnav {
width: 100%;
}
ul.topnav {
font-size: 1em;
line-height: 0.5em;
}
ul.topnav li {
margin-bottom: 8px;
list-style:none;
}
ul.topnav li a {
color: #8B8B8B;
display: block;
line-height: 10px;
padding: 10px 25px;
font: 14px"b yekan", Tahoma;
background: #e9e9e9;
transition: 0.2s ease background;
}
ul.topnav>li>a:hover {
background: #58719f;
color: #fafafa;
}
ul.topnav ul {
margin: 0;
padding: 0;
display: none;
}
ul.topnav ul li {
margin: 0;
padding: 0;
clear: both;
}
ul.topnav ul li a {
background: #5A5A5A;
color: #F4F4F4;
font-size: 13px;
font-weight: normal;
outline: 0 none;
padding-left: 20px;
text-shadow: none;
}
ul.topnav ul ul li a {
background: #828282;
padding-left: 40px;
color: #F4F4F4;
}
ul.topnav ul ul li a:hover {
color: #fff;
background: #717171;
}
ul.topnav span {
float: right;
}
ul.topnav li ul {
margin: 0 8px;
}
ul.topnav li ul {
margin: 0 8px;
}
<script>
$(".topnav").accordion({
accordion: false,
speed: 500,
closedSign: '',
openedSign: ''
});
</script>
/*
* jQuery UI Multilevel Accordion v.1
*
* Copyright (c) 2011 Pieter Pareit
*
* http://www.scriptbreaker.com
*
*/
//plugin definition
(function($){
$.fn.extend({
//pass the options variable to the function
accordion: function(options) {
var defaults = {
accordion: 'true',
speed: 300,
closedSign: '[+]',
openedSign: '[-]'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
//Assign current element to variable, in this case is UL element
var $this = $(this);
//add a mark [+] to a multilevel menu
$this.find("li").each(function() {
if($(this).find("ul").size() != 0){
//add the multilevel sign next to the link
$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
//avoid jumping to the top of the page when the href is an #
if($(this).find("a:first").attr('href') == "#"){
$(this).find("a:first").click(function(){return false;});
}
}
});
//open active level
$this.find("li.active").each(function() {
$(this).parents("ul").slideDown(opts.speed);
$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
});
$this.find("li a").click(function() {
if($(this).parent().find("ul").size() != 0){
if(opts.accordion){
//Do nothing when the list is open
if(!$(this).parent().find("ul").is(':visible')){
parents = $(this).parent().parents("ul");
visible = $this.find("ul:visible");
visible.each(function(visibleIndex){
var close = true;
parents.each(function(parentIndex){
if(parents[parentIndex] == visible[visibleIndex]){
close = false;
return false;
}
});
if(close){
if($(this).parent().find("ul") != visible[visibleIndex]){
$(visible[visibleIndex]).slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").html(opts.closedSign);
});
}
}
});
}
}
if($(this).parent().find("ul:first").is(":visible")){
$(this).parent().find("ul:first").slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
});
}else{
$(this).parent().find("ul:first").slideDown(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
});
}
}
});
}
});
})(jQuery);