Hello, can I have this as soon as possible. You can use either js or jquery. you
ID: 3781161 • Letter: H
Question
Hello, can I have this as soon as possible. You can use either js or jquery. you can also use different style sheetbut do not make a link to an online style sheet.
1. Actually I just want to be able to hide the dropdown menu when I click on the document, and if you camn make the dropmenu look nicer that would be great.
2.I want the same document to be able to make the dropdown menu as an overlay from left to right for the search. and as a reveal or push for the menu.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"><!-- includes icons font-awesome-->
<script src="modernizr-1.5.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
body{
width:100%;
height:100%;
}
header{
background-color:#005580;
margin-left:-8px;
}
table{
width:110%;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 15px 18px;
text-decoration: none;
}
.searchlist{
background-color:white
}
}
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px ; /* Chrome, Safari, Opera */
-moz-column-rule: 4px ; /* Firefox */
column-rule: 4px ;
}
</style>
<header>
<table class="horizontal">
<ul>
<div>
<div class="menu"><li><a href="#home"><span i class="fa fa-align-justify ">  </i>Welcome Bill Flanagan</span></a></li> </div>
<div>
<li><a href="#close"><span i class="fa fa-close "></span></a></li>
<li class= "search"><a href="#search"><span i class="fa fa-search "></span></a></li>
<li><a href="#home"><span i class="fa fa-home "></span></a></li>
</div>
</div>
</ul>
</table>
</header>
<div class="searchlist"data-role="collapsible-set" data-inset="false" >
<div data-role="collapsible">
<h3>Active Emplyee List</h3>
<ul data-role="listview" data-inset="false">
<div><li>Time Not Approved</div>
<div>Over Time</div>
</ul>
</div>
<div data-role="collapsible">
<h3>Reports</h3>
<ul data-role="listview" data-inset="false">
<div>Standard Period Hours Report</div>
<div>Timesheet Report</div>
<div>Change Report</div>
<div>Approval Report Summary View</div>
<div>Approval Report With Hours</div>
<div>In or Out Report</div>
</ul>
</div>
<div data-role="collapsible">
<h3>Other</h3>
<ul data-role="listview" data-inset="false">
<div>Vacation</div>
<div>Piad Time Off</div>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$(".search").click(function(){
$(".searchlist").slideToggle(1500,'swing');
});
});
</script>
<div class="menulist"data-role="collapsible-set" data-inset="false" >
<div data-role="collapsible">
<h3>Active Emplyee List</h3>
<ul data-role="listview" data-inset="false">
<div>Time Not Approved</div>
<div>Over Time</div>
</ul>
</div>
<div data-role="collapsible">
<h3>Reports</h3>
<ul data-role="listview" data-inset="false">
<div>Standard Period Hours Report</div>
<div>Timesheet Report</div>
<div>Change Report</div>
<div>Approval Report Summary View</div>
<div>Approval Report With Hours</div>
<div>In or Out Report</div>
</ul>
</div>
<div data-role="collapsible">
<h3>Other</h3>
<ul data-role="listview" data-inset="false">
<div>Vacation</div>
<div>Piad Time Off</div>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
$(".menu").click(function(){
$(".menulist").slideToggle(1500,'swing');
});
});
</script>
</div>
<body>
</body>
<footer>
</footer>
</html>
Explanation / Answer
This overrides the toggle , add the code to the script sections of menulist and searchlist respectively
For hiding menulist
$(document).mouseup(function (e)
{
var container = $(".menulist"); // class or ID
if (!container.is(e.target) && // If click not on this div
container.has(e.target).length === 0) // or on a child of div
{
container.hide();
}
});
For hiding searchlist
$(document).mouseup(function (e)
{
var container = $(".menulist"); // class or ID
if (!container.is(e.target) && // If click not on this div
container.has(e.target).length === 0) // or on a child of div
{
container.hide();
}
});
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.