Make second level UL take 100% with special behaviour

Make second level UL take 100% with special behaviour - javascript

I am trying to make a custom tree view to shop trough diverse categories on my website. You can see what I want to do here on fiddle. I need the second level UL to take all the space under the current row of selected li without making other li of the row moving.
Here is my code
HTML:
<ul Class="CategoriesContainer">
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
CSS:
.CategoriesContainer{
width:90%;
display:Block;
list-style:none;
}
.CategoryButton{
height:130px;
width:130px;
display:inline-block;
margin-left:5px;
margin-top:5px;
background-color:lightgray;
text-align:center;
cursor:pointer;
list-style-type:none;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.UpperHalf {
display:block;
height:50%;
width:100%;
}
.LowerHalf {
display:block;
height:50%;
width:100%;
}
.CategoryImage
{
height:40px;
width:40px;
vertical-align:middle;
}
.CategoryText {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.TreeContainer {
width:100%;
display:none;
}
.Toggled
{
left:0;
top:0;
padding:0;
margin:0;
white-space:nowrap;
display:block;
background-color:green;
}
Javascript
$(".CategoryButton").click(function () {
var Container = $(this).find(".TreeContainer")[0];
if ($(Container).hasClass("Toggled"))
{
$(Container).removeClass("Toggled");
}
else
{
$(Container).addClass("Toggled");
}
});
Edit
There is a mock up of what I am trying to do.
Regards

You can make the containers same row not moving down adding:
.CategoryButton{
min-height: 130px;
vertical-align:top;
}
The problem now is that your sub-category won't be shown as you have given to the containers a fixed height (130px) while the 2 divs inside gets all the height (50% height each), so there's no room for your subcategory. It will be shown (overflow is visible) but won't move the elements below as the height of the container will always be 130px.
You may fix this changing the height to min-height:130px; and as the height is a fixed amount add height:65pxto the elements inside. This way the container height will change when the subcategory is shown:
JSFIDDLE

You can add float: left to the ul elements and also add some margin-bottom to display them correctly:
$(".CategoryButton").click(function() {
var Container = $(this).find(".TreeContainer")[0];
if ($(Container).hasClass("Toggled")) {
$(Container).removeClass("Toggled");
} else {
$(Container).addClass("Toggled");
}
});
.CategoriesContainer {
width: 90%;
display: Block;
list-style: none;
}
.CategoryButton {
height: 130px;
width: 130px;
display: inline-block;
margin-left: 5px;
margin-top: 5px;
background-color: lightgray;
text-align: center;
cursor: pointer;
list-style-type: none;
margin-bottom: 40px;/*add margin-bottom*/
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.UpperHalf {
display: block;
height: 50%;
width: 100%;
}
.LowerHalf {
display: block;
height: 50%;
width: 100%;
}
.CategoryImage {
height: 40px;
width: 40px;
vertical-align: middle;
}
.CategoryText {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.TreeContainer {
width: 100%;
display: none;
}
.Toggled {
left: 0;
top: 0;
padding: 0;
margin: 0;
white-space: nowrap;
display: block;
background-color: green;
float: left;/*add float left*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul Class="CategoriesContainer">
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
<li Class="CategoryButton">
<div class="UpperHalf">
<span class="helper"></span>
<img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
</div>
<div class="LowerHalf">
<span class="CategoryText">Shoes</span>
</div>
<ul Class="TreeContainer">
<li>Man shoes</li>
<li>Woman shoes</li>
</ul>
</li>
</ul>

Related

how to close hamburger menu after click open

I have hamburger menu and added click to open a sub menu and after that struggling to close the sub-menu, please check the detailed code below. Thanks...!!
function myFunction() {
document.getElementById("mob").style.display = "inline-flex";
document.getElementById("mob").style.position = "absolute";
}
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: none;
}
.hamburger-container {
cursor: pointer;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>

Toggle the class active on the #mob element, adding the CSS attributes you added in your function.
function myFunction() {
const toggle_btn = document.getElementById('mob');
toggle_btn.classList.toggle('active');
}
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: none;
}
.hamburger-container {
cursor: pointer;
}
#mob.active {
display: inline-flex;
position: absolute;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>

Create a hidden class and use toggle function to add or remove it
const myFunction = () => document.getElementById("mob").classList.toggle("hidden");
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: inline-flex;
position: absolute;
}
.mobile-menu.hidden {
display: none;
}
.hamburger-container {
cursor: pointer;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu hidden" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>

Create a class of active-mobile-menu in the CSS and use the classList.toggle() function in the JavaScript to switch between different classes.
function myFunction() {
let mobileMenu = document.getElementById('mob');
mobileMenu.classList.toggle('active-mobile-menu');
}
.hamburger {
width: 35px;
height: 5px;
background-color: #f7941e;
margin: 6px 0;
}
.mobile-menu {
display: none;
}
.active-mobile-menu{
display: block;
position: absolute;
}
.hamburger-container {
cursor: pointer;
}
<div class="mobile-navbar">
<div class="hamburger-container" onclick="myFunction()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="mobile-menu" id="mob">
<ul class="mobile-menu-container">
<li class="mobile-menu-items">Home</li>
<li class="mobile-menu-items">Types Tours
<div class="mobile-types-sub-menu">
<ul class="mobile-types-sub-menu-items">
<li>test-1</li>
<li>test-2</li>
<li>test-3</li>
</ul>
</div>
</li>
<li class="mobile-menu-items">The regions</li>
<li class="mobile-menu-items">Instructors</li>
<li class="mobile-menu-items">Questions / Answers</li>
<li class="mobile-menu-items">Contacts</li>
</ul>
</div>
</div>
</div>
**

CSS How can make li fit in ul depending on their height?

I'm in trouble with some li in a menu. I made a sandbox with what i have made, i'm struggling at making the div in blue fill the height correctly or with auto height. The menu on the left (red one) is okay. That should be like in this menu (https://www.superc.ca/ in "EPICERIE EN LIGNE") : https://i.stack.imgur.com/aKo36.png
My CSS :
#header .navbar-responsive-collapse-mainMenu {
border-top: gray;
padding: 0;
border-top-width: 2px;
}
#header .navbar-responsive-collapse-mainMenu span.title {
color: #242932;
font-size: 12px;
letter-spacing: 0;
line-height: 14px;
text-align: center;
}
#header .navbar-responsive-collapse-mainMenu .nav-menu-header {
margin-left: 160px;
}
#header .navbar-responsive-collapse-mainMenu ul li a {
font-family: rubikmedium;
color: #242932;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
line-height: 17px;
}
#header
div.navbar-responsive-collapse-mainMenu
ul.nav-menu-header
> :first-child.open
> a {
color: #e31937;
}
#header
div.navbar-responsive-collapse-mainMenu
ul.nav-menu-header
> :first-child
> a {
padding-left: 0;
}
#header .open > .dropdown-menu {
display: flex;
flex-direction: column;
left: -161px;
height: 550px;
background-color : black;
width: 1440px;
}
#header .ul-level-1 .li-level-1 {
height: 40px;
width: 264px;
background-color: #FF7276;
margin-left: 160px;
}
#header .ul-level-1 .li-level-1 a {
color: #242932;
font-family: latoregular;
font-size: 14px;
letter-spacing: 0;
line-height: 22px;
}
#header .ul-level-1 .li-level-1 .ul-level-2 {
margin-left: 275px;
width: 1005px;
display: flex;
flex-wrap: wrap;
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
width: 265px;
margin-bottom: 8px;
margin-left : 20px;
background-color : #add8e6;
display: inline-block;
position: relative;
}
This is my html :
<header id="header">
<nav class="navbar ng-isolate-scope" data-rbs-website-menu="" data-block-id="mainMenu" style="margin-bottom: 0;">
<div class="collapse navbar-collapse navbar-responsive-collapse-mainMenu">
<ul class="nav navbar-nav nav-menu nav-menu-header">
<li class="dropdown open">
<a data-toggle="dropdown" class="dropdown-toggle" target="_self" aria-expanded="true">
Les produits <b class="caret"></b>
</a>
<ul class="dropdown-menu ul-level-1">
<li class=" li-level-1">
<a target="_self">offre du moment</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-2">
<li class=" li-level-2">
<a target="_self">First Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">first sub-element</a>
</li>
<li class=" li-level-3">
<a target="_self">second sub-element</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Second Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Third Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Ciseaux, équerres, compas</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Fourth Category
</li>
<li class=" li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
<li class=" li-level-2">
<a target="_self">Fifth Category</a>
<ul class="dropdown-sub-menu list-unstyled ul-level-3">
<li class=" li-level-3">
<a target="_self">Blanc, typex et correcteurs</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos à plumes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
<li class=" li-level-3">
<a target="_self">stylos billes</a>
</li>
</ul>
</li>
</ul>
</li>
<li class=" li-level-1">
<a target="_self">Les produits les plus vendus</a>
</li>
<li class=" li-level-1">
<a target="_self">Cartouches d’encre</a>
</li>
<li class=" li-level-1">
<a target="_self">Imprimantes</a>
</li>
<li class=" li-level-1">
Papiers
</li>
<li class=" li-level-1">
<a target="_self">Fauteuils & chaises</a>
</li>
<li class=" li-level-1">
<a target="_self">Services généraux</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
This is my sandbox if you have any idea : https://codepen.io/Kh4yz/pen/XWEqOqN

You can always inspect a webpage and see how the CSS is implemented.
#header .ul-level-1 .li-level-1 .ul-level-2 {
margin-left: 275px;
width: 1005px;
/* Remove flex */
column-count: 3;
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
width: 265px;
margin-bottom: 8px;
margin-left : 20px;
background-color : #add8e6;
display: inline-block;
position: relative;
float: left; /* This is missing */
}

how to show the div that is linked using anchor tag?

I want to show the div that is clicked based on the menu heading and other divs are hidden when the clicked div is shown . I have shown the home div only and rest default in the code .
I tried using
let el = $(this).attr('href');
$(el).toggle();
but its not working perfectly . I want to show the div that is clicked only , home div should be visible by default when no menu is clicked.
.content {
height: 20px;
}
.inactive {
display: none;
}
#home-content {
background-color: red
}
#portfolio-content {
background-color: blue;
}
#about-content {
background-color: yellow;
}
#resume-content {
background-color: green;
}
#contact-content {
background-color: white;
}
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="container">
<div class="content" id="home-content">
</div>
<div class="content inactive" id="about-content">
</div>
<div class="content inactive" id="portfolio-content">
</div>
<div class="content inactive" id="resume-content">
</div>
<div class="content inactive" id="contact-content">
</div>
</div>

Try this
$( ".sidebar-menu-item" ).click(function() {
$(".content").hide();
let el = $(this).attr('href');
$(el).toggle();
});
#home-content {
height: 200px;
background-color: red
}
#portfolio-content {
height: 200px;
background-color: blue;
display: none;
}
#about-content {
height: 200px;
background-color: yellow;
display: none;
}
#resume-content {
height: 200px;
background-color: green;
display: none;
}
#contact-content {
height: 200px;
background-color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="content" id="home-content">
home-content
</div>
<div class="content" id="about-content">
about-content
</div>
<div class="content" id="portfolio-content">
portoflio-content
</div>
<div class="content" id="resume-content">
resume-content
</div>
<div class="content" id="contact-content">
contact-content
</div>

Nevermind, this worked for me:
$('.sidebar-menu-item').click(function () {
let href = $(this).attr('href');
$(".content").addClass("inactive");
$(href).removeClass("inactive");
});

submenu is not positioning as desired

I want to make my dropdown menu like in the image below. The problem is when I hover on the second item of main menu, the submenu leaves a margin from top as shown on left hand side of picture. I do not want that empty space. I want the submenu to always show on the same size and position for all the main menu options which have a submenu.
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:0px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {
content: " ";
display: block;
float: right;
height: 0;
margin-right: -1px;
margin-top: 5px;
width: 190px;
padding-left:10px;
}
#abg > li > a:hover, #abg > .active > a:hover {
text-decoration: none;
background-color:#49b3e7;
padding-top:15px;
padding-bottom:20px;
}
#media (max-width: 767px) {
.navbar-nav {
display: inline;
}
.navbar-default .navbar-brand {
display: inline;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: red;
background-color: #ccc;
border-radius: 4px;
margin-top: 2px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
.navbar-nav .open .dropdown-menu {
border-bottom: 1px solid white;
border-radius: 0;
}
.dropdown-menu {
padding-left: 10px;
}
.dropdown-menu .dropdown-menu {
padding-left: 20px;
}
.dropdown-menu .dropdown-menu .dropdown-menu {
padding-left: 30px;
}
li.dropdown.open {
border: 0px solid red;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<nav class="navbar navbar-default navbar-fixed-top hidden-xs " role="navigation" style="background-color:#49b3e7;color:white;margin-top:50px;cursor:pointer">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" style="cursor:pointer">
<span class="dropdown-toggle" data-toggle="dropdown" style="color:white;cursor:pointer;">All Products </span><span class="caret" style="color:white;cursor:pointer;"></span>
<ul class="dropdown-menu" id="abg">
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Grocery</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Meals & Prep</li>
<li>Spreads & Sweeteners</li>
<li>Breafast</li>
<li>Salty Snacks</li>
<li>Chocolate & Candy</li>
<li>Condiments & Spices</li>
<li>Fruits & Nuts</li>
<li>Cookies & Bars</li>
<hr>
<li>Shop All Grocery</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Dole-licious </br>Snacks </h3>
<img src="grocery1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Beverages</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Coffee & Tea</li>
<li>Dairy</li>
<li>Jucies</li>
<li>Mixes</li>
<li>Sports & Energy</li>
<li>Water & Sparkling</li>
<hr>
<li>Shop All Beverages</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-61px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:77px;margin-top:163px;"> Flavorful</br> fun made </br>easy</h3>
<img src="beverages1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Bath & Body</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Deodorants</li>
<li>Hand Soaps</li>
<li>Shaving</li>
<li>Shower</li>
<li>Skin Care</li>
<hr>
<li>Shop All Bath & Body</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-116px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Would you </br>Lather </h3>
<img src="bath&body1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Health</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Ladies</li>
<li>Dental & Eye</li>
<li>Relief</li>
<li>Supplements</li>
<li>Adult Care</li>
<hr>
<li>Shop All Health</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-171px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;">Picture of </br>Health </h3>
<img src="health.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Cleaning Supplies</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Surface Cleaners</li>
<li>Paper & Plastic</li>
<li>Laundry</li>
<li> Dish Soaps</li>
<li>Air & Fresheners</li>
<hr>
<li>Shop All Cleaning Supplies</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-226px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> So Fresh </br>and Clean </h3>
<img src="cleaning.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Home & Office</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Stationery</li>
<li>Appliances & Tools</li>
<li>Tabletop & Storage</li>
<hr>
<li>Shop All Home & Office</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-281px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Lock in the </br>freshness </h3>
<img src="home.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Babies & Kids </span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Care & Cleaning</li>
<li>Diapers & Wipes</li>
<li>Nutrition</li>
<hr>
<li>Shop All Babies & Kids</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-336px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Baby got </br> Bath </h3>
<img src="baby.png" class="img-responsive"></a>
</ul>
</li>
<li>Lifestyle<span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color: rgba(255, 255, 255, .1);"></span></li>
<li>Pets <span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color:rgba(255, 255, 255, .1);"></span></li>
<li>Shop All Products <span class="glyphicon glyphicon-chevron-right" style="margin-left:100px;color:rgba(255, 255, 255, .1);"></span></li>
</ul>
</li>
<li>Best Sellers</li>
<li>What's New</li>
<li>On Sale</li>
<li>Samples</li>
</ul>
</div>
</nav>
</div>

You have to add position: static and top: 0 in CSS.
.dropdown-submenu {
position: static;
top: 0;
left: 100%;
}

Add this to your CSS:
.dropdown-submenu {
position: static;
}
This places your submenu dropdowns relative to your main dropdown menu.

expand the bootstrap navbar when clicks a drop-down menu occurs

Hello I want to know if it was possible to expand the bootstrap navbar when I click on a dropdown menu ? please
before click:
+------------------------------------------------+
| THE NAVBAR - dropdown menu \/ |
+------------------------------------------------+
after click:
+------------------------------------------------+
| THE NAVBAR - dropdown menu \/ |
| submenu |
+------------------------------------------------+

This might be helpful as an example. It's relatively straight forward once you look into the CSS. There are also libraries like Yamm!3.
.navbar-default {
border-bottom: 4px solid #f00 !important;
background: #fff !important;
}
.navbar-default .navbar-nav > li > a,
.navbar-header a.navbar-brand {
color: #f00;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #f00;
border-bottom-color: #f00;
}
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #f00;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
.megamenu img {
width: 100%;
height: 150px;
padding: 5px;
}
#media (max-width: 768px) {
.megamenu {
margin-left: 0;
margin-right: 0;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
color: #fff;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home
</li>
<li class="dropdown menu-large"> Stuff <span class="caret"></span>
<ul class="dropdown-menu megamenu row ">
<li>
<div class="col-sm-6 col-md-3 ">
<a href="# " class="img-responsive ">
<img src="http://placehold.it/300/f00/fff" />
</a>
</div>
<div class="col-sm-6 col-md-3 ">
<a href="# " class="img-responsive ">
<img src="http://placehold.it/300/f00/fff" />
</a>
</div>
<div class="col-sm-6 col-md-3 ">
<a href="# " class="img-responsive ">
<img src="http://placehold.it/300/f00/fff" />
</a>
</div>
<div class="col-sm-6 col-md-3 ">
<a href="# " class="img-responsive ">
<img src="http://placehold.it/300/f00/fff" />
</a>
</div>
</li>
</ul>
</li>
<li class="dropdown menu-large "> Things <span class="caret"></span>
<ul class="dropdown-menu megamenu row ">
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Item I Main</li>
<li>Item I Sub
</li>
<li class="disabled ">Item II Sub
</li>
<li>Item III Sub
</li>
<li class="divider "></li>
<li class="dropdown-header ">Item II Main</li>
<li>Item I Sub
</li>
<li>Item II Sub
</li>
<li>Item III Sub
</li>
<li>Item VI Sub
</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Item III Main</li>
<li>Item I Sub
</li>
<li>Item II Sub
</li>
<li>Item III Sub
</li>
<li>Item VI Sub
</li>
<li>Item V Sub
</li>
<li class="divider "></li>
<li class="dropdown-header ">Item IV Main</li>
<li>Item I Sub
</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Item V Main</li>
<li>Item I Sub
</li>
<li>Item II Sub
</li>
<li>Item III Sub
</li>
<li class="divider "></li>
<li class="dropdown-header ">Item VI Main</li>
<li>Item I Sub
</li>
<li>Item II Sub
</li>
<li>Item III Sub
</li>
</ul>
</li>
<li class="col-sm-3 ">
<ul>
<li class="dropdown-header ">Item VII Main</li>
<li>Item I Sub
</li>
<li>Item II Sub
</li>
<li>Item III Sub
</li>
<li>Item VI Sub
</li>
<li>Item V Sub
</li>
<li>Item VI Sub
</li>
<li>Item VII Sub
</li>
<li>Item VIII Subp
</li>
<li>Item VIIII Sub
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Try using bootstrap collapse like this:
.my-menu{
padding: 10px;
}
#collapse-menu{
margin-bottom: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default my-nav-bar" role="navigation">
<a class="navbar-brand" href="#">Logotipo</a>
<div class="pull-right my-menu">
<button href="#" class="dropdown-toggle btn btn btn-primary" data-toggle="collapse" data-target="#collapse-menu"> <!--add the atributes data-toggle="collapse" data-target="#collapse-menu" to the element that you want to be the collapser-->
Dropdown Menu <b class="caret"></b>
</button>
<ul id="collapse-menu" class="list-group collapse"> <!--add the class "collapse" to the element that you want collapse-->
<li class="list-group-item">Acción #1</li>
<li class="list-group-item">Acción #2</li>
</ul>
</div>
</nav>

We Keep Coding

JavaScript is the programming language of the Web.

Make second level UL take 100% with special behaviour - javascript

Related

how to close hamburger menu after click open

CSS How can make li fit in ul depending on their height?

how to show the div that is linked using anchor tag?

submenu is not positioning as desired

expand the bootstrap navbar when clicks a drop-down menu occurs

Categories

Resources