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...
}
Related
Trying to build my first project, a restaurant website but having some trouble with toggling the nav bar. The nav bar links direct the user to the specified section, but the nav bar remains open after that section is reached/ How do I get it to close after clicking on a link?
This is the JavaScript I'm using:
//select element function
const selectElement=function(element){
return document.querySelector(element);
};
let menuToggler=selectElement('.menu-toggle');
let body=selectElement('body');
menuToggler.addEventListener('click',function(){
body.classList.toggle('open');
});
the HTML of the header/navbar section :
<script src="https://unpkg.com/scrollreveal" charset="utf-8"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<nav class="nav" id="navbar">
<div class="menu-toggle" id="menu-toggle">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
<img src="" alt="">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu
</li>
<li class="nav-item">
Order Online
</li>
<li class="nav-item">
Make a Reservation
<li class="nav-item">
Contact Us
</li>
</ul>
</nav>
</div>
</header>
<!-- Header ends-->
CSS of the header, using font awesome
.nav{
height: 7.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle{
color: #fff;
font-size: 2.2rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 2.5rem;
cursor: pointer;
z-index: 1800;
}
/*to hide x of nav bar*/
.fa-times{
display: none;
}
.nav-list{
list-style: none;
position: fixed;
top: 0;
left: 0;
width: 70%;
height:100vh;
background-color: var(--main-font-color-dark);
padding: 4.4rem;
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 1850;
transform: translateX(-100%); /*hides nav bar*/
transition: transform .5s;
}
/*before nav clicked*/
.nav::before{
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.8);
z-index: 1000;
opacity: 0;
trasform:scale(0);
transition: opacity .5s;
}
.open .fa-times{
display: block;
}
/*hides hamburger icon on clicking it*/
.open .fa-bars{
display: none;
}
.open .nav-list{
transform: translateX(0);
}
.open .nav::before{
opacity: 1;
transform: scale(1);
}
let navbar= document.getElementById("navbar")
let link= document.getElementById("link-a")
let showMenu= document.getElementById("show-menu")
link.addEventListener('click',function(){
document.getElementById("navbar").style.display = "none"
});
showMenu.addEventListener('click',function(){
document.getElementById("navbar").style.display = "flex"
});
#navbar{
height: 40px;
width: 100%;
background: red;
}
<div id="navbar" >
<a id="link-a">Click me to hide menu</a>
</div>
<div id="show-menu"> Show menu</div>
small demo to toggle menu
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
The top Google result is a CSS Tricks guide from 2011, which uses an obtrusive jQuery. Is this the best way to convert a menu to a drop down list in 2020? The site I'm working on is only HTML/CSS so far so I'd prefer to keep it that way (but I'm flexible).
Here's what I'm working with so far.
header {
width: 60%;
margin: 0 auto;
}
header #logo {
float: left;
}
header nav {
float: right;
}
header li {
float: left;
display: inline;
margin-left: 10px;
}
#media (max-width: 960px) {
{
/*TBC*/
}
}
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="./test-styles.css">
</head>
<body>
<header>
<div class="header-container">
<div id="logo">
<h2>MyCompany</h2>
</div>
<nav>
<ul>
<li>Services</li>
<li>Contact Us</li>
<li>Privacy</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I'd like for the nav bar to convert to a menu at less than 960px width (hence the media query).
Any help would be appreciated 😊
You can totally do it using pure HTML / CSS.
I personally like to use display: grid and the grid-area property to move elements from one column to the other, alongside display / hide.
<header>
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="#">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</header>
If the current width of the viewport is > 960px, we only display the left-menu and right-menu elements in the form of a classic navbar. You notice that we have a third div which is the dropdown menu toggler, hidden when the width is > 960px.
When the width is < 960px, we hide right-menu and display burger-menu-toggle-container instead. We then move it to the left using the grid-area property. Of course you can chose to let it on the right side.
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
The dropdown menu toggler is actually a checkbox. Using the :checked selector and ~ we can display / hide the dropdown menu by setting its max-height from 0 to whatever value in px you need.
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
Attached is a working example.
html {
height: 100%;
background-color: black;
}
body {
overflow-x: hidden;
font-family: 'poiret one';
font-weight: 400;
font-size: 1.2em;
margin: 0;
min-height: 100%;
background-color: transparent;
display: grid;
grid-template-rows: auto 1fr ;
}
/* hide all scrollbars */
*::-webkit-scrollbar {
display: none;
}
a {
color: white;
text-decoration: none;
}
#nav-container {
font-weight: bold;
width: 100%;
max-height: 100px;
height: 100%;
position: fixed;
z-index: 2;
transition: .4s;
}
#nav-container a:hover {
color: rgba(253, 52, 131, .9);
}
nav {
max-width: 1268px;
height: 100%;
display: grid;
grid-template-columns: auto 1fr ;
grid-template-areas: 'left right';
margin: 0 auto;
}
.navbar-column {
margin: auto 0;
}
#left-menu {
padding: 12px 6px;
}
#right-menu {
text-align: right;
}
#burger-menu-toggle-container {
display: none;
transition: .4s;
padding: 6px;
}
#burger-menu-toggle-container:hover .bar {
background-color: rgba(253, 52, 131, .9);
}
#burger-menu-toggle {
margin: 0;
display: block;
position: absolute;
width: 35px;
height: 27px;
opacity: 0;
outline: none;
-webkit-appearance: none;
border: none;
z-index: 100;
cursor: pointer;
}
#bar1, #bar2, #bar3 {
width: 32px;
height: 4px;
background-color: rgba(225, 225, 225, 1);
border-radius: 6px;
margin: 6px 0;
transition: 0.5s;
}
#burger-menu-toggle:checked ~ #bar1 {
-webkit-transform: rotate(45deg) translate(-6px, 4px) ;
transform: rotate(45deg) translate(6px, 6px) ;
}
#burger-menu-toggle:checked ~ #bar2 {opacity: 0;}
#burger-menu-toggle:checked ~ #bar3 {
-webkit-transform: rotate(-45deg) translate(-8px, -8px) ;
transform: rotate(-45deg) translate(8px, -8px) ;
}
#burger-menu-toggle:checked ~ #burger-menu {
max-height: 500px;
transition: max-height 0.5s ease-in;
}
#burger-menu {
transition: .4s;
position: absolute;
z-index: 1;
left: 0;
top: 80px;
width: 100%;
max-height: 0;
overflow: hidden;
}
#burger-menu-body {
border-radius: 2px;
display: grid;
position: relative;
margin: auto;
padding: 4px;
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
#burger-menu-links {
display: grid;
grid-template-rows: 1fr;
}
.burger-menu-link {
padding: 5px;
}
#media screen and (max-width: 960px) {
#right-menu {
display: none;
}
#burger-menu-toggle-container {
display: block;
grid-area: left;
}
}
.nav-item {
padding: 2px;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = .9,maximum-scale = .9" />
</head>
<body class="sm-section">
<header>
<header>
<div id="header">
<div id="nav-container" class="nav-transparent">
<nav>
<div class="navbar-column" id="left-menu">
<a class="nav-item" href="/">COMPANY</a>
</div>
<div class="navbar-column" id="right-menu">
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact us</a>
<a class="nav-item" href="#">Privacy</a>
</div>
<div class="navbar-column" id="burger-menu-toggle-container">
<input type="checkbox" id="burger-menu-toggle">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
<div id="burger-menu">
<div id="burger-menu-content">
<div id="burger-menu-header">
</div>
<div id="burger-menu-body">
<div id="burger-menu-links">
<div class="burger-menu-link">
<a href="#">
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Services</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Contact us</a>
</div>
<div class="burger-menu-link">
<a class="nav-item" href="#">Privacy</a>
</div>
</div>
</div>
</div>
<div id="burger-menu-footer">
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
</main>
</body>
<
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.
I have just uploaded my website on hosting server.When I put my mouse cursor on sub categories and click on it - it opens....but when on smartphone, I try to touch sub categories, it closes the whole navbar.
I tried to increase font size but it didn't work. Here is my website booksjerry.com You can check yourself
<div id="navigation">
<!-- container -->
<div class="container">
<div id="responsive-nav">
<!-- category nav -->
<div class="category-nav">
<span class="category-header">Fire Discount Categories <i class="fa fa-list"></i></span>
<ul class="category-list">
<li class="dropdown side-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="productscat.php?cat=COLLECTION OF BOOKS SETS">Collection of Books Sets<i class="fa fa-angle-right"></i></a>
<div class="custom-menu">
<div class="row">
<div class="col-md-4">
<ul class="list-links">
<li>
<h3 class="list-links-title"> Sub-Categories</h3></li>
<li>SETS OF NOVELS</li>
</ul>
<hr class="hidden-md hidden-lg">
</div>
<div class="col-md-4">
<ul class="list-links">
<li>
<li style="padding-top:26px;">Sets of Childern Novels</li>
</ul>
<hr class="hidden-md hidden-lg">
</div>
</div>
</div>
</li>
<ul class="category-list">
<li class="dropdown side-dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="productscat.php?cat=URDU BOOKS">Urdu Books<i class="fa fa-angle-right"></i></a>
<div class="custom-menu">
<div class="row">
<div class="col-md-4">
<ul class="list-links">
<li>
<h3 class="list-links-title"> Sub-Categories</h3></li>
<li>Fiction</li>
<li>Non-Fiction</li>
</ul>
<hr class="hidden-md hidden-lg">
</div>
<div class="col-md-4">
<ul class="list-links">
<li>
<li style="padding-top:26px;">Sets of Childern Novels</li>
<li >Self-help</li>
<li>Poetry/Philosphy</li>
</ul>
<hr class="hidden-md hidden-lg">
</div>
</div>
</div>
</li>
</ul>
</div>
---CSS--
.category-nav {
float: left;
width: 270px;
}
.category-nav .category-header {
padding: 15px;
display: block;
text-transform: uppercase;
background: #F8694A;
color: #FFF;
font-weight: 700;
}
.category-nav .category-header>i {
float: right;
line-height: 20px;
}
.category-nav .category-list {
position: absolute;
width: 270px;
background-color: #FFF;
border-left: 1px solid #DADADA;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
z-index: 50;
-webkit-transition: 0.3s all;
transition: 0.3s all;
}
.category-nav.show-on-click .category-list {
opacity: 0;
visibility: hidden;
-webkit-transform: translate(0px, 15px);
-ms-transform: translate(0px, 15px);
transform: translate(0px, 15px);
}
.category-nav.show-on-click .category-list.open {
opacity: 1;
visibility: visible;
-webkit-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
.category-nav .category-list>li+li {
border-top: 1px solid #DADADA;
}
.category-nav .category-list>li.dropdown>.dropdown-toggle>i {
float: right;
line-height: 20px;
}
.category-nav .category-list>li>a {
display: block;
padding: 15px;
text-transform: uppercase;
}
.category-nav .category-list>li>a:hover, .category-nav .category-list>li>a:focus, .category-nav .category-list>li.dropdown.open>a {
color: #F8694A;
}
What I want is whenever I touch sub categories list on smartphone, it should open a new page as it happens in all smartphone optimized websites.
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".