I would like that when clicking on any menu option, it will collapse.
I leave the Html code, Css and a link to test the code.
Html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>NavSlide</title>
<!-- FontAwesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Google Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,300italic,400italic,500italic" rel="stylesheet" type="text/css">
<!-- The CSS -->
<link href="css/navslide.css" rel="stylesheet" />
<!-- This js is used for the menu works in older browsers -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="menu-container">
<a href="#" class="menu-btn"><i class="fa fa-bars fa-lg"></i></a>
<div class="menu-slide">
<ul class="menu-list">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About us</a></li>
<li class="menu-item"><a href="#">Documentation</a></li>
</ul>
</div>
</nav>
</body>
</html>
The Css:
/* Generated by less 2.4.0 */
/* Create by: Felipe Dumont
/* Version: 1.0
/* Website: www.darkmedia.com.br
/* Colors */
/* Animations */
.transition-2s {
transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
}
/* Menu */
.menu-container:hover .menu-slide {
-o-transform: translate(270px, 0);
-moz-transform: translate(270px, 0);
-ms-transform: translate(270px, 0);
-webkit-transform: translate(270px, 0);
transform: translate(270px, 0);
opacity: 1;
}
.menu-container .menu-btn {
color: #333333;
position: fixed;
top: 10px;
left: :10px;
cursor: pointer;
z-index: 10000;
font-size: 19px;
text-decoration: none;
}
.menu-container .menu-btn:hover {
color: #666666;
}
.menu-container .menu-slide {
margin: 0;
padding: 0;
list-style: none;
background-color: #e0e0e0;
height: 100%;
left: -270px;
top: 0;
width: 270px;
overflow-y: auto;
z-index: 10000;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
-webkit-transition: 6s ease-in-out;
transition: 0.3s ease-in-out;
position: fixed;
opacity: 0;
}
.menu-container .menu-slide .menu-list {
padding: 0;
margin: 0;
list-style: none;
}
.menu-container .menu-slide .menu-list .menu-item a {
padding: 8px;
display: block;
text-decoration: none;
color: #333333;
transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.menu-container .menu-slide .menu-list .menu-item a:hover {
color: #FFF;
background-color: #333;
transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-webkit-transition: 0.2s ease-in-out;
-ms-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
}
The link to see the code working.
http://www.cubicfactory.com/jseditor/welcome/102060/edit
I tried to call a function in the Href of the links, and in that function make the div disappear.
$(".menu-slide").hide();
Indeed .menu-slide disappears but does not appear again when I put the cursor on it. I think the only way is using css something similar to this but when you click on the corresponding class.
function closes () { $ (". menu-container .menu-slide"). css ( {'left: -270px;'}
);
}
Regarding putting the code in a snippet I have no idea how to do it, I will search the forum and the next time I will do it with a snippet.