I'm trying to create a sidebar menu, but I am not sure really where to start.
How I need it to work is in the image below, when the main nav link 1 is clicked, it will slide in the sub nav items from the right that are associated to that selection. Obviously main nav link 2 will have it's own options too and link 3 could have no sub nav items.
Thanks in advance for any assistance!
Here's what I have so far:
$(".primary-nav .box").click(function(e) {
e.preventDefault();
$('.primary-nav').addClass('hidden-xs-up')
$('.secondary-nav').removeClass('hidden-xs-up');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').addClass('hidden-xs-up');
$('.primary-nav').removeClass('hidden-xs-up');
});
.sidebar {
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav hidden-xs-up">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/fj4Lou7w/
Based on your code and whitout change your markup I have a few suggestions to make simpler your slide-in animation:
Use position absolute for the secondary navs.
Use a class and transition to make the slide animation.
Use a reference from your primary buttons to target the right secondary element.
$(".primary-nav .box").click(function(e) {
e.preventDefault();
var targ = $(this).attr('href');
$(targ).addClass('showsub');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').removeClass('showsub');
});
.sidebar {
position:relative;
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
overflow:hidden;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
.secondary-nav {
position:absolute;
z-index:10;
left:100%;
top:0;
width:100%;
background-color: #434a54;
transition:left .2s linear;
}
.secondary-nav.showsub {
left:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#sec1" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary1
</a>
<a href="#sec2" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary2
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav" id="sec1">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
<div class="secondary-nav" id="sec2">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
</div>
</div>
</div>
</div>
</div>
it is not the best solution, but on hover you can hide, move,... elements in the DOM with CSS like:
[
body {
font-family: Arial;
padding: 40px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 60px;
}
ul.submenu {
opacity: 0;
position: absolute;
top: 0;
left: 120px;
transition: all 400ms ease-in-out;
}
ul li {
border-top: 1px solid white;
}
ul li a {
display: block;
background-color: #434a54;
text-align: center;
color: white;
text-decoration: none;
padding: 20px 0;
}
ul li:hover .submenu {
opacity: 1;
left: 61px;
}
<ul class="mainmenu">
<li>
Menu1
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu3
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu4
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
</ul>
Related
I'm trying to make open close menu for responsive size. I hide the menu with this code
left: -50%;
but when I try to open it with this code it doesn't work.
#left-side.active {
left: 60%;
}
Here is my jQuery toggle code:
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
This is my complete code:
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
height: 100%;
background-color: #f5f7f8;
}
h1 {
text-align: center;
padding: 0.6em 1em;
font-size: 1.4em;
background-color: #31363b;
display: inline-block;
width: 20%;
position: fixed;
}
h1>a {
text-decoration: none;
color: #202326;
;
transition: all 1s ease-in-out;
font-weight: 900;
}
h1:hover>a {
text-decoration: none;
color: #aaa;
;
}
#h1-span {
font-weight: bold;
display: inline;
}
/* Left Side */
#left-side {
height: 100%;
width: 20%;
background-color: #2a2f33;
position: fixed;
display: flex;
overflow-x: hidden;
top: 44px;
left: 0;
}
/*Logo section*/
.logo-ul {
width: 6%;
background-color: #2a2f33;
}
.logo-li {
padding: 0.5em;
}
.img-logo {
width: 40px;
height: 40px;
opacity: 0.4;
transition: all 1s ease;
}
.img-logo:hover {
opacity: 1;
}
.notification-span {
font-size: 10px !important;
border-radius: 5px;
border: 1px solid green;
margin-left: 8px;
padding: 1px 12px;
}
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 11px;
line-height: 30px;
padding: 10px 10px;
cursor: pointer;
transition: all .2s linear;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:hover i {
color: #fff;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
}
/* hover effect */
#accordion ul ul li a:hover {
color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
list-style-type: disc;
padding: 1.8em;
background: #32363a
}
#accordion ul ul:first-child {
background: #32363a;
}
/* #accordion li.active ul{
display:block;
}*/
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
.left-icon i {
color: #f55661;
}
.open {
background-color: #f55661;
}
.open i {
color: white;
}
/* Right Side */
#right-side {
margin-left: 20%;
width: 75%;
padding: 10px;
}
.right-image {
display: flex;
justify-content: flex-end;
width: 100%;
}
.right-image img {
width: 3em;
height: 3em;
border-radius: 50%;
}
.rightside-ul {
display: flex;
margin: 1em;
}
.rightside-li {
margin: 1em;
font-size: .8em;
}
.rightside-li>a {
text-decoration: none;
}
/*Card Area*/
.card-area {
display: flex;
flex-wrap: wrap;
}
/*Card Component*/
.card {
padding: 1em;
}
h4 {
color: #959595;
font-size: 22px;
margin-left: 1em;
}
.right-icon i {
color: #fff;
}
.card-component {
display: flex;
padding: 1em;
}
.content-area {
padding: 1em;
background-color: #fff;
border-radius: 5px;
display: flex;
flex-direction: column;
align-content: center;
}
.statusbar {
min-width: 1.5em;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.content-nav {
display: flex;
}
.content-area p {
width: 300px;
text-align: left;
align-items: center;
margin-bottom: 1em;
}
.content-ul {
display: flex;
padding-bottom: 2em;
margin-left: 4em;
}
.content-ul li {
display: flex;
}
.content-ul li a {
text-decoration: none;
margin-right: 1em;
}
.img-container {
width: 300px;
height: 200px;
margin: 0 auto;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-footer-ul {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.card-footer-ul li a {
text-decoration: none;
}
.reaction-span {
color: #acacac;
}
/* RESPONSİVE */
#media screen and (max-width: 988px) {
body {
font-size: .8em;
}
#left-side {
min-width: 230px;
left: -50%;
/*This hides the menu to left*/
}
#right-size {
margin-left: 10%;
width: 70%;
padding: 6px;
}
h1 {
font-size: 1.2em;
min-width: 230px;
padding: 1em;
display: none;
}
#accordion h3 {
font-size: .7em;
}
#left-side.active {
left: 60%;
}
.leftsidebarButton {
position: absolute;
left: 5%;
top: 20px;
cursor: pointer;
}
.leftsidebarButton::before {
content: "\f0c9";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 2.2em;
position: absolute;
padding: 5px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100;200;300;400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
<div id="wrap-page">
<h1><span id=h1-span>sociality</span>.io</h1>
<section id="left-side" onclick="toggleLeftSideBar()">
<div id="logo" class="active">
<ul class="logo-ul">
<li class="logo-li">
<img class="img-logo" src="images/instagramlogo.png" alt="instagram-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/twitterlogo.png" alt="twitter-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/pinterestlogo.png" alt="pinterest-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/linkedinlogo.png" alt="linkedin-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/youtubelogo.png" alt="youtube-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/facebooklogo.png" alt="facebook-logo">
</li>
</ul>
</div>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="left-icon icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="left-icon icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="leftsidebarButton "></div>
</section>
<section id="right-side ">
<ul style="list-style: disc; " class="rightside-ul ">
<li style="color:#acacac " class="rightside-li ">
<span style="color:black ">Published</span>
</li>
<li style="color:#3ac183 " class="rightside-li ">
<span style="color:black ">Scheduled</span>
</li>
<li style="color:#f7bf38; white-space: nowrap; " class="rightside-li ">
<span style="color:black ">Need Approval</span>
</li>
<li style="color:#fb6450 " class="rightside-li ">
<span style="color:black ">Error</span>
</li>
<li style="color:#67b1f2 " class="rightside-li ">
<span style="color:black ">Notes</span>
</li>
<div class="right-image ">
<img src="images/fakefacegenerator.jpg " alt="profileimage ">
</div>
</ul>
<h4>14 January 2016</h4>
<!--Card Components -->
<div class="card-area ">
<div class="card ">
<div class="card-component ">
<div style="background-color: #3ac183; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-facebook-f "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="fas fa-ban "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/icecream1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #f7bf38; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-twitter "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="fas fa-check "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/icecream2.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-retweet "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<h4>12 January 2016</h4>
<!--Card Components -->
<div class="card-area ">
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "><i class="fab fa-facebook-f "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-twitter "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-retweet "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-instagram "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
I Will Provide an easier method u can follow to hide and show sidebar
$('.toggle').click(function() {
$('.sidebar').toggleClass('active');
});
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.d-flex {
display: flex;
height: 100%;
}
.sidebar {
width: 300px;
background-color: blueviolet;
transition: width 500ms ease-out;
}
.main {
width: 100%;
background-color: cyan;
}
.sidebar.active {
width: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
<div class="d-flex">
<div class="sidebar">f</div>
<div class="main">
<a class="toggle" href="javascript:void(0)">toggle</a>
</div>
</div>
I am using this code LINK.
When i click on Parent Menu like Services then sub-menu of services menu will be open but when i click on other menu then other sub menu will also open.
I want when i click on other sub menu then previous sub-menu will be close.
Kindly provide me solution for this.
Thank you
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
</script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
Basically you need to know the concept of not() in jQuery, so that you can hide the element except clicked one. Here is the working example.
$('#menu-content').children("li").on('click', function(){
$("li[data-toggle='collapse']").not(this).addClass('collapsed');
$("li[data-toggle='collapse']").not(this).next('ul').removeClass('in');
//alert('clicked');
});
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #2e353d;
position: fixed;
top: 0px;
width: 300px;
height: 100%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: #23282e;
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
/*
.collapsed{
.arrow:before{
font-family: FontAwesome;
content: "\f053";
display: inline-block;
padding-left:10px;
padding-right: 10px;
vertical-align: middle;
float:right;
}
}
*/
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: FontAwesome;
content: "\f078";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: #181c20;
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #2e353d;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: #4f5b69;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #ffffff;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
#media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#products" class="collapsed active">
<i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="products">
<li class="active">CSS3 Animation</li>
<li>General</li>
<li>Buttons</li>
<li>Tabs & Accordions</li>
<li>Typography</li>
<li>FontAwesome</li>
<li>Slider</li>
<li>Panels</li>
<li>Widgets</li>
<li>Bootstrap Model</li>
</ul>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<i class="fa fa-car fa-lg"></i> New <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
<li>New New 2</li>
<li>New New 3</li>
</ul>
<li>
<a href="#">
<i class="fa fa-user fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
</ul>
</div>
</div>
Another version of code which works for me.
$(".submenu").not('.submenu-child').click(function()
{
$(".submenu").not(this).find(".collapse").collapse('hide');
});
Where submenu class is applied to parent menu and submenu-child class applied to submenus.
I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>
So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>
I want the text to be editable when click on the edit icon. The div is already draggable. It has to be done using javascript. Can anyone help me?
HTML code
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
CSS code
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
.drag-area i {text-align:center; width:100%; padding-top:9px; font-size:16px; color:#ccc;}
contenteditable="true" does the trick, click the text you want to edit
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title" contenteditable="true">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title" contenteditable="true">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title" contenteditable="true">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
$('.fa-pencil').click(function() {
console.log();
$(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', true)
});
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
see the snippet. when you click on pencil icon than you can edit the content of div.
clicking on pencil will set the attr contentEditable to true.
$('.fa-pencil').click(function() {
if($(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable') === "true"){
$(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', false);
} else {
$(this.parentNode.previousElementSibling.previousElementSibling).attr('contentEditable', true);
$(this.parentNode.previousElementSibling.previousElementSibling).focus();
}
});
.drag-list>.title {font-weight:bold; color:#4c5258;}
.drag-list li a {margin-right:5px; color:#8aa2ad; padding:6px 6px;}
.drag-list li a:hover {color:#4c5258;}
.drag-list {margin: 0 auto; padding:0;}
.drag-list > li {list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0;}
.drag-list .title {display: inline-block; padding: 6px 6px 6px 12px; vertical-align: top; max-width:50%; overflow:hidden; white-space:nowrap;}
.drag-list .drag-area {display: inline-block; border-right:1px solid rgb(196, 196, 196); width: 40px; height: 32px; vertical-align: top; cursor: move;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drag-list">
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Lack of knowledge</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span class="title">Hired elsewhere</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right"><i class="fa fa-pencil"></i></a>
</li>
</ul>
See the updated code snippet, once you again click on pencil icon your changes will get saved.
<li>
<span class="drag-area"><i class="fa fa-bars"></i></span>
<span id="title1" class="title">Not a fit</span>
<a class="pull-right" href="#"><i class="fa fa-trash"></i></a>
<a class="pull-right" onclick='document.getElementById("title1").setAttribute("contenteditable", "true");'><i class="fa fa-pencil"></i></a>
</li>
I have a dropdown menu in a panel body with another panel body with content under it. When clicking the dropdown menu it is hidden under the second panel body. I have tried various z-index's and overflow:visible / auto etc but had no joy.
example here: https://jsfiddle.net/084wukwz/1/
html:
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-body">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><h3 class="box-title"><i class="fa fa-fw fa-info-circle"></i> Heading</h3></a>
</div>
<p class="text-muted">Basic Info</p><br/>
<div id="collapseOne" class="panel-collapse collapse">
<p>Full Info</p>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-success"><i class="fa fa-fw fa-plus-circle"></i> button 1</button>
<button class="btn btn-success"><i class="fa fa-fw fa-plus-circle"></i> button 2</button>
<button class="btn btn-info"><i class="fa fa-fw fa-eye"></i>button 3</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:inherit;overflow:visible;">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">drop down 5</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="hpanel">
<div class="panel-body">
<h3 class="box-title">Content</h3>
</div>
</div>
</div>
</div>
css:
.hpanel > .panel-heading {
color: inherit;
font-weight: 600;
padding: 10px 4px;
transition: all .3s;
border: 1px solid transparent;
}
.hpanel .hbuilt.panel-heading {
border-bottom: none;
}
.hpanel > .panel-footer {
color: inherit;
border: 1px solid #e4e5e7;
border-top: none;
font-size: 90%;
background: #f7f9fa;
}
.hpanel.panel-collapse > .panel-heading,
.hpanel .hbuilt {
background: #fff;
border-color: #e4e5e7;
border: 1px solid #e4e5e7;
padding: 10px 10px;
border-radius: 2px;
}
.hpanel .panel-body {
background: #fff;
border: 1px solid #e4e5e7;
border-radius: 2px;
padding: 20px;
position: relative;
}
.panel-body .panel-heading{
padding: 10px 0px;
}
.panel-collapse .panel-body {
border: none;
}
.hpanel {
background-color: none;
border: none;
box-shadow: none;
margin-bottom: 25px;
}
Use position: absolute; for your dropdown-menu (and remove its other style attributes).
overflow has nothing to do with this issue. If in doubt, always have a look at the CSS Reference.
Updated fiddle