I’m testing out some code that I found on github that I changed a bit to my likes but I can’t seem to make the div hide when the menu is clicked for a second time. Here’s the javascript file that I tried to modify with no luck.
(function ($) {
$.fn.popmenu = function (options) {
var settings = $.extend({
'controller': true,
'width': '100%',
'background': '#fff',
'focusColor': '#BEACAC',
'top': '-15',
'iconSize': '33.3%',
'color': '#000',
'border': '0px'
}, options);
if (settings.controller === true) {
var temp_display = 'none';
} else {
var temp_display = 'block';
}
var tar = $(this);
var tar_body = tar.children('ul');
var tar_list = tar_body.children('li');
var tar_a = tar_list.children('a');
var tar_ctrl = tar.children('.pop_ctrl');
function setIt() {
tar_body.css({
'display': temp_display,
'position': 'absolute',
'margin-top': -settings.top,
'margin-left': -settings.left,
'background': settings.background,
'width': settings.width,
'float': 'left',
'padding': '0',
'border': settings.border
});
tar_list.css({
'display': 'block',
'color': settings.color,
'float': 'left',
'width': settings.iconSize,
'height': settings.iconSize,
'text-align': 'center',
});
tar_a.css({
'text-decoration': 'none',
'color': settings.color
});
tar_ctrl.hover(function () {
tar_ctrl.css('cursor', 'pointer');
}, function () {
tar_ctrl.css('cursor', 'default')
});
tar_ctrl.click(function (e) {
e.preventDefault();
tar_body.show('fast');
$(document).mouseup(function (e) {
var _con = tar_body;
if (!_con.is(e.target) && _con.has(e.target).length === 0) {
_con.hide();
}
//_con.hide(); some functions you want
});
});
tar_list.hover(function () {
$(this).css({
'background': settings.focusColor,
'cursor': 'pointer'
});
}, function () {
$(this).css({
'background': settings.background,
'cursor': 'default'
});
});
}
return setIt();
};
}(jQuery));
I have also tried a bit of a script on the menu.php page where there’s a function. I tried putting the function in an if statement but that didn’t work either.
menu.php
$(function(){
$('#demo_box').popmenu();
})
It’s the first time I’m posting so I hope I’m not breaking any rules on this site.
Also, I can add the code I tried if any of you would like to see.
Thank you. Dida
Update:
(menu.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu</title>
<link rel="stylesheet" href="jQueryPopMenu-master/lib/font-awesome/css/font-awesome.min.css"/>
<style>
#container{
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: red;
display: inline;
height: 70px;
}
#demo_box{
}
.demo_ul{
padding-left: 2%;
}
.pop_ctrl{
margin-left: 20%;
}
.fa{
font-size: 40px;
}
#container ul {
list-style-type: none;
padding: 0;
overflow: hidden;
z-index:1000;
}
#container li {
float: left;
}
#container li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.search {
padding:8px 10px;
border:0px solid #dbdbdb;
font-size: 14px;
}
input:focus {
outline:none;
}
.button {
position:relative;
padding:6px 10px;
left:-8px;
border:2px solid white;
background-color:red;
color:#fafafa;
font-size: 14px;
}
.button:hover {
background-color:#fafafa;
color:#207cca;
}
pre{
font-family: Consolas,Liberation Mono,Courier,monospace;
font-size: 13px;
}
@media screen and (orientation: portrait){
pre{
overflow-x: scroll;
}
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div id="demo_box">
<span class="pop_ctrl"><i class="fa fa-bars"></i></span>
<ul id="demo_ul">
<li class="demo_li"><a href="http://www.gucheen.pro"><div><i class="fa fa-home"></i></div><div>Home</div></a></li>
<li class="demo_li"><a href="http://blog.gucheen.pro"><div><i class="fa fa-cloud"></i></div><div>Cloud</div></a></li>
<li class="demo_li"><div><i class="fa fa-cog" ></i></div><div>settings</div></li>
<li class="demo_li"><div><i class="fa fa-envelope"></i></div><div>E-mail</div></li>
<li class="demo_li"><div><i class="fa fa-clock-o"></i></div><div>Clock</div></li>
<li class="demo_li"><div><i class="fa fa-folder"></i></div><div>Files</div></li>
<li class="demo_li"><div><i class="fa fa-heart-o"></i></div><div>Favourites</div></li>
<li class="demo_li"><div><i class="fa fa-mobile"></i></div> <div>Mobile</div></li>
<li class="demo_li"><div><i class="fa fa-power-off"></i></div> <div>Exit</div></li>
</ul>
</div>
</li>
<li style="float:right; padding-right:2%;">
<form>
<input class="search" type="text" placeholder="Search" name="Search" autofocus="autofocus">
<input class="button" type="button" value="Search"></input>
</form>
</li>
</div>
</ul>
<script src="jQueryPopMenu-master/lib/jquery/jquery.min.js"></script>
<script src="jQueryPopMenu-master/src/jquery.popmenu.js"></script>
<script>
$(function(){
$('#demo_box').popmenu();
})
</script>
</body>
</html>
Here you go.
I did a little something to the css, as I couldn't click on the span, I guess fiddle does something to it.
What I did was setting an initial variable determining whether the menu is open or not, and from that switching between true and false as you click the control. You can also justify using the ".toggle()" option already existing in jQuery for even more simplicity.
var menuIsOpen = false;
tar_ctrl.click(function (e) {
e.preventDefault();
if(menuIsOpen){
tar_body.hide('fast');
} else {
tar_body.show('fast');
}
menuIsOpen = (menuIsOpen ? false : true);
});