Here is my code of side-bar:
<div class="span1">
<!-- start: Main Menu -->
<div id="sidebar-nav">
<ul id="dashboard-menu">
<li >
<a href="/amain">
<i class="fa fa-home fa-fw"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-signal"></i>
<span>Charts</span>
</a>
</li>
<li>
<a class="" href="#">
<span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign">
<i class="fa fa-group"></i>Replication</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-1">
<a class= "" href ="#" >
<li>
<span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-user"></i>
</span>New
</li>
</a>
<a class="" href="#">
<li>
<span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-frown-o"></i>
</span>Pending</li>
</a>
<a class="" href="#">
<li><span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-thumbs-down" ></i>
</span>Rejected</li>
</a>
<a class="" href="#">
<li><span data-toggle="collapse" data-parent="#menu-group-1">
<i class="fa fa-thumbs-up"></i>
</span>Approved</li>
</li>
</a>
</ul>
<li>
<a class="" href="#">
<span data-toggle="collapse" data-parent="#menu-group-2" href="#sub-item-2" class="sign">
<i class="fa fa-shopping-cart"></i>Asset</span>
</a>
<ul class="children nav-child unstyled small collapse" id="sub-item-2">
<li class="item-2 deeper parent active">
<li><span data-toggle="collapse" data-parent="#menu-group-2">
<i class="fa fa-plus"></i>
</span>ADD</li>
<li><span data-toggle="collapse" data-parent="#menu-group-2">
<i class="fa fa-eye"></i>
</span>View</li>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="fa fa-th-large"></i>
<span>Tables</span>
</a>
</li>
</ul>
</div>
</div>
Css:-
#media (max-width: 1020px) {
#dashboard-menu {
margin-left: 5px;
}
#dashboard-menu .pointer {
display: none;
}
#dashboard-menu li a span {
visibility: hidden;
}
}
#media (min-width: 980px) and (max-width: 1224px){
.nav-first{
display: none !important;
}
.sidebar-right{
display: none;
}
}
#media (min-width: 768px) and (max-width: 979px){
.navbar-inverse input.search {display: none;}
.sidebar-right{
display: none;
}
.nav-collapse .nav{
background-color: #2c3e50;
margin-top: 11px;
}
.nav-collapse{
position: relative;
z-index: 1000;
}
.nav-collapse .nav>li>a:focus{
background: none;
}
}
#media (max-width: 767px) {
.nav-first{
display: none !important;
}
#content {
margin-left: 0px;
}
.sidebar-right{
display: none;
}
.navbar .brand {
font-size: 13px;
}
.input-prepend.input-append input{
width: 75px;
}
.navbar-fixed-top{
margin-left: 0px;
}
.nav-collapse .nav{
background-color: #2c3e50;
margin-top: 11px;
}
.nav-collapse{
position: relative;
z-index: 1000;
}
.nav-collapse .nav>li>a:focus{
background: none;
}
#sidebar-nav{
margin-left: -15px;
}
#main-stats .stat{
width: 50%;
float: left;
}
#dashboard-menu a span {
display: block;
}
#sidebar-nav {
left: -200px;
position: fixed;
z-index: 9999;
background-color: #f7f7f7;
padding-top: 0px;
border-right: 1px solid #ccc;
width: 165px;
box-shadow: 1px 1px 4px 1px rgb(233, 233, 233);
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-o-transition: left .25s ease;
-ms-transition: left .25s ease;
transition: left .25s ease;
}
#sidebar-nav #dashboard-menu {
margin-left: 10px;
}
#sidebar-nav #dashboard-menu li a span {
visibility: visible;
margin-left: 25px
}
#sidebar-nav #dashboard-menu li:last-child a {
border-bottom: 0px;
box-shadow: none;
}
#dashboard-menu a i,#dashboard-menu > li.active i{
margin-left: 20px;
}
#dashboard-menu ul.submenu li{
margin-left: -10px;
}
#sidebar-nav.display {
position: absolute;
left: 0;
height: 100%;
top: 103px;
padding-left: 32px;
width: 115px;
}
.btn-res {
display: inherit;
}
}
Can anyone help me for generating the jquery and ajax for rendering different pages on every li without loading the sidebar.
You can add one div as a container. And in that container you can put your content on click of "li".
Related
So I'm making a menu interaction on click, this is my code snippet if you want to have a look.
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() {
icons.classList.toggle('active');
labels.classList.toggle('active');
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
height: 60px;
overflow: hidden;
border-radius: 60px;
transition: 1s ease;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<ul class="icons">
<li class="trigger">
<i class="fas fa-bars"></i>
</li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The issue that I have is that the transition property doesn't work well with height in CSS. Is there a problem that I didn't noticed, and is there a quick fix to it?
So the problem is that you try to transition the height to 100% - but CSS can't handle that right away.
Fast but problematic solution:
You could set the height in the :hover to a fixed amount, e.g. 100px.
But if you want to have a new item in there or change the size of the items, you would have to adjust the height manually.
What I would do:
First I would restructure the HTML a bit and move the trigger out of the item list:
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
Then I would adjust the CSS of the .icons:
(remove the height, add a max-height and adjust the transition)
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
In the end I would let JavaScript take care of getting the max-height right.
On hover:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
Or on click (if you would rather do that):
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onclick = function() {
if (icons.style.maxHeight){
icons.style.maxHeight = null;
} else {
icons.style.maxHeight = icons.scrollHeight + "px";
}
}
Here are some (maybe) helpfull links:
https://www.w3schools.com/howto/howto_js_collapsible.asp
How can I transition height: 0; to height: auto; using CSS?
https://codepen.io/felipefialho/pen/ICkwe
Snippet:
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
btn.onmouseover = function () {
icons.style.maxHeight = icons.scrollHeight + "px";
}
btn.onmouseout = function () {
icons.style.maxHeight = null;
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
overflow: hidden;
border-radius: 60px;
max-height: 0;
transition: max-height 0.2s ease-out;
}
nav ul.icons:hover {
height: 100%;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<button class="trigger">
<i class="fas fa-bars"></i>
</button>
<ul class="icons fas-container">
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The CSS transition of the "height" property works only if both values (starting and ending) are specified.
You can get around this by using "max-height" instead of "height". This way you can safely exceed the exact height that the element should have at the end of the transition.
let btn = document.querySelector('.trigger');
let icons = document.querySelector('.icons');
let labels = document.querySelector('.labels');
btn.onclick = function() {
icons.classList.toggle('active');
labels.classList.toggle('active');
}
body {
background: #222;
}
.trigger {
cursor: pointer;
}
nav {
position: absolute;
top: 30px;
right: 30px;
color: #222;
}
nav ul.icons {
background: #fff;
width: 60px;
max-height: 60px;
overflow: hidden;
border-radius: 60px;
transition: max-height 1s ease;
}
nav ul.icons:hover {
max-height: 120px;
}
nav ul li {
list-style: none;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
<nav>
<ul class="icons">
<li class="trigger">
<i class="fas fa-bars"></i>
</li>
<li><i class="fas fa-home"></i></li>
<li><i class="fas fa-users"></i></li>
<li><i class="fas fa-concierge-bell"></i></li>
<li><i class="fas fa-pen"></i></li>
<li><i class="fas fa-phone-alt"></i></li>
</ul>
</nav>
</body>
</html>
The only side effect could be too much delay in the return transition if you set a final value that is too high compared to what is needed.
Just a very basic snippet of what you wanted to create on the first place.
[NOTE] : Transition is quite/bit cranky (not smooth). But it is what it is.
document.querySelector('.menu').addEventListener('click', (e) => {
document.querySelector('ul.icons').classList.toggle('active');
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.navbar {
position: relative;
width: 100%;
height: 100px;
display: flex;
padding: 0 4rem;
align-items: center;
justify-content: flex-end;
background-color: #f7f8f9;
border-bottom: 1px solid #c1c1c1;
}
.navbar .menu i {
cursor: pointer;
font-size: 2rem;
}
.navbar .icons {
opacity: 0;
list-style: none;
position: absolute;
top: calc(100% + 2px);
right: 3rem;
display: flex;
flex-direction: column;
transition: opacity 250ms ease;
}
.navbar .icons .icon {
display: grid;
padding: 1rem;
flex-shrink: 0;
min-width: 30px;
min-height: 30px;
border-radius: 50%;
place-items: center;
background-color: #f7f8f9;
border: 1px solid #c1c1c1;
transition: margin-top 250ms ease;
}
.navbar .icons .icon:not(:first-of-type) {
margin-top: 1rem;
}
.navbar .icons .icon:nth-child(2) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(3) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(4) {
margin-top: -62px;
}
.navbar .icons .icon:nth-child(5) {
margin-top: -62px;
}
.navbar .icons.active {
opacity: 1;
}
.navbar .icons.active .icon {
margin-top: 1rem;
}
.navbar .icons.active .icon:nth-child(1) {
margin-top: 0;
transition-delay: 250ms;
}
.navbar .icons.active .icon:nth-child(2) {
transition-delay: 250ms;
}
.navbar .icons.active .icon:nth-child(2) {
transition-delay: 500ms;
}
.navbar .icons.active .icon:nth-child(3) {
transition-delay: 750ms;
}
.navbar .icons.active .icon:nth-child(4) {
transition-delay: 1s;
}
.navbar .icons.active .icon:nth-child(5) {
transition-delay: 1.25s;
}
.bx {
font-size: 1.75rem;
}
<link href='https://unpkg.com/boxicons#2.0.9/css/boxicons.min.css' rel='stylesheet'>
<nav class="navbar">
<div class="menu" role="button">
<i class='bx bx-menu'></i>
</div>
<ul class="icons">
<li class="icon">
<i class='bx bx-home-alt'></i>
</li>
<li class="icon">
<i class='bx bx-user'></i>
</li>
<li class="icon">
<i class='bx bx-bell'></i>
</li>
<li class="icon">
<i class='bx bx-pen'></i>
</li>
<li class="icon">
<i class='bx bx-phone'></i>
</li>
</ul>
</nav>
If anyone can make this transition a bit more smooth edit this answer.
One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.
the menu is showing correctly, but it is not clickable(can't open the item to show the sub items), I'm new to javascript so not sure if the javascript is correct.
I also added a link for the font-awesome style sheet and used it to get the icons for the menu.
is this the best way to do the menu, or can I do it without javascript
$(document).ready(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var dropdownlink = this.el.find(".dropdownlink");
dropdownlink.on(
"click", {
el: this.el,
multiple: this.multiple
},
this.dropdown
);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass("open");
if (!e.data.multiple) {
$el
.find(".submenuItems")
.not($next)
.slideUp()
.parent()
.removeClass("open");
}
};
var accordion = new Accordion($(".accordion-menu"), false);
});
ul {
list-style: none;
}
a {
text-decoration: none;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
background: #fff;
border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;
}
.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}
.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}
.submenuItems {
display: none;
background: #C8E6C9;
}
.submenuItems li {
border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}
.submenuItems a:hover {
background-color: #CDDC39;
color: #fff;
}
<div>
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-user" aria-hidden="true">
</i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Personal1</li>
<li>Personal2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria- hidden="true"></i> Leave
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Leave1</li>
<li>Leave2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="far fa-sun" aria-hidden="true">
</i> Configuration
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Configuration1</li>
<li>Configuration</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-receipt" aria- hidden="true"></i> Report
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Report1</li>
<li>Report2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-align-justify" aria- hidden="true"></i> Attendance
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Attendance1</li>
<li>Attendance2</li>
</ul>
</li>
</ul>
Include jquery in head tag and Keep your script tag at the end of the html to ensure that it runs after html is loaded.
ul {
list-style: none;
}
a {
text-decoration: none;
}
.accordion-menu {
width: 100%;
max-width: 350px;
margin: 60px auto 20px;
background: #fff;
border-radius: 4px;
}
.accordion-menu li.open .dropdownlink {
color: #CDDC39;
}
.accordion-menu li.open .dropdownlink .fa-chevron-down {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion-menu li:last-child .dropdownlink {
border-bottom: 0;
}
.dropdownlink {
cursor: pointer;
display: block;
padding: 15px 15px 15px 45px;
font-size: 18px;
border-bottom: 1px solid #ccc;
color: #212121;
position: relative;
transition: all 0.4s ease-out;
}
.dropdownlink i {
position: absolute;
top: 17px;
left: 16px;
}
.dropdownlink .fa-chevron-down {
right: 12px;
left: auto;
}
.submenuItems {
display: none;
background: #C8E6C9;
}
.submenuItems li {
border-bottom: 1px solid #B6B6B6;
}
.submenuItems a {
display: block;
color: #727272;
padding: 12px 12px 12px 45px;
transition: all 0.4s ease-out;
}
.submenuItems a:hover {
background-color: #CDDC39;
color: #fff;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="accordion-menu">
<li>
<div class="dropdownlink"><i class="fa fa-user" aria-hidden="true">
</i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Personal1</li>
<li>Personal2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fa fa-paper-plane" aria-
hidden="true"></i> Leave
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Leave1</li>
<li>Leave2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="far fa-sun" aria-hidden="true">
</i> Configuration
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Configuration1</li>
<li>Configuration</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-receipt" aria-
hidden="true"></i> Report
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Report1</li>
<li>Report2</li>
</ul>
</li>
<li>
<div class="dropdownlink"><i class="fas fa-align-justify" aria-
hidden="true"></i> Attendance
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
<ul class="submenuItems">
<li>Attendance1</li>
<li>Attendance2</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var Accordion = function (el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var dropdownlink = this.el.find(".dropdownlink");
dropdownlink.on(
"click",
{ el: this.el, multiple: this.multiple },
this.dropdown
);
};
Accordion.prototype.dropdown = function (e) {
var $el = e.data.el,
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass("open");
if (!e.data.multiple) {
$el
.find(".submenuItems")
.not($next)
.slideUp()
.parent()
.removeClass("open");
}
};
var accordion = new Accordion($(".accordion-menu"), false);
});
</script>
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.
The code below is my CSS file. What I am trying to do here is to hide the <div class="container navbar-more visible-xs"> when I am not selecting the nav button <a href="#navbar-more-show">. But when I select the nav button, the container navbar will appear. The problem here is I am unsure of how to hide the div class by default, it keeps appearing on my page and I want to have it to appear when i click a navigation button.
$(document).ready(function() {
$('a[href="#navbar-more-show"], .navbar-more-overlay').on('click', function(event) {
event.preventDefault();
$('body').toggleClass('navbar-more-show');
if ($('body').hasClass('navbar-more-show')) {
$('a[href="#navbar-more-show"]').closest('li').addClass('active');
} else {
$('a[href="#navbar-more-show"]').closest('li').removeClass('active');
}
return false;
});
});
body.navbar-more-show {
overflow: hidden;
}
.animate {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar {
height: calc(100%);
max-height: 300px;
-webkit-transform: translate(0px, calc(-100% + 69px));
transform: translate(0px, calc(-100% + 595px));
}
.navbar .container:not(.navbar-more) {
padding: 0px;
}
.navbar-more-overlay {
background-color: rgba(102, 102, 102, 0.55);
display: none;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1029;
}
.navbar-more-show > .navbar-more-overlay {
display: block;
}
.navbar-more-show > .navbar {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 295px);
}
.navbar-nav.mobile-bar {
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-items: stretch;
align-items: stretch;
margin: 0px 0px;
}
.navbar-nav.mobile-bar > li {
-webkit-flex-grow: 1;
flex-grow: 1;
text-align: center;
}
.navbar-nav.mobile-bar > li > a > span.menu-icon {
display: block;
font-size: 1.8em;
}
.navbar-more {
background-color: rgb(255, 255, 255);
height: calc(100% - 69px);
overflow: auto;
}
.navbar-more .navbar-form {
border-width: 0px;
}
.navbar-more .navbar-nav > li > a {
color: rgb(64, 64, 64);
}
.navbar-more > .navbar-nav > li > a > span.menu-icon {
margin-left: 10px;
margin-right: 10px;
}
#media (min-width: 768px) {
.navbar {
height: auto;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.navbar-nav.mobile-bar {
display: block;
max-height: 64px;
margin: 0px -.;
}
.navbar-nav.mobile-bar > li > a > span.menu-icon {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-more-overlay"></div>
<nav class="navbar navbar-inverse navbar-fixed-top animate">
<div class="container navbar-more visible-xs">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Submit</button>
</span>
</div>
</div>
</form>
<ul class="nav navbar-nav">
<li>
<a href="#">
<span class="menu-icon fa fa-picture-o"></span>
Photos
</a>
</li>
<li>
<a href="#">
<span class="menu-icon fa fa-bell-o"></span>
Reservations
</a>
</li>
</ul>
</div>
<div class="container">
<div class="navbar-header hidden-xs">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-right mobile-bar">
<li>
<a href="#">
<span class="menu-icon fa fa-home"></span>
Home
</a>
</li>
<li>
<a href="#">
<span class="menu-icon fa fa-info"></span>
<span class="hidden-xs">About the Boat</span>
<span class="visible-xs">About</span>
</a>
</li>
</li>
<li>
<a href="#">
<span class="menu-icon fa fa-phone"></span>
<span class="hidden-xs">Contact Us</span>
<span class="visible-xs">Contact</span>
</a>
</li>
<li class="visible-xs">
<a href="#navbar-more-show">
<span class="menu-icon fa fa-bars"></span>
More
</a>
</li>
</ul>
</div>
</nav>
Scroll to bottom to see contents in Result!
You can use these following methods
$('#YOURDIV').show() // Show your div like display:block;
$('#YOURDIV').hide() // Hide your div like display:none;
From your description it just sounds like you need to add code to hide the element to start with:
$(document).ready(function() {
$(".container.navbar-more.visible-xs").hide();
// your other code...
}