Beste,
Ik ben een dropdown menu aan maken, maar ik wil een overlay er in hebben in achter grond dat alleen de drop down menu naar voren komt.
Maar krijg het niet voor elkaar want dan komt de button niet mee in de overlay,
Dit is de script.
Code
{% if categories %}
<div class="container" >
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="cd-dropdown-wrapper">
<a class="cd-dropdown-trigger" >{{ text_category }}</a>
<nav class="cd-dropdown">
<a href="#0" class="cd-close">Close</a>
<ul class="cd-dropdown-content">
{% for category in categories %}
{% if category.children %}
<li class="has-children">
<a href="{{ category.href }}" class="dropdown-toggle" data-toggle="dropdown">{{ category.name }}</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a></li>
<li class="has-children">
<a href="#">{{ category.name }}</a>
{% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
<ul>
{% for child in children %}
<li><a href="{{ child.href }}">{{ child.name }}</a></li>
{% endfor %}
</ul>
{% endfor %}
</li>
</ul> <!-- .cd-secondary-dropdown -->
</li> <!-- .has-children -->
{% endif %}
{% endfor %}
</ul> <!-- .cd-dropdown-content -->
</nav><!-- .cd-dropdown -->
</ul>
</div>
{% endif %}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
});
</script>
Dit is stukje van alleen de overlay css
Code
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}
ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul.oe_full{
width:100%;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}