How can I make this menu pure CSS? [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
How can I make this pure CSS (no javascript)?
Here's a fiddle: http://jsfiddle.net/q646Ljg6/4/
HTML:
<div id="navigation" class="navigation">
<div id="dropmenu" class="dropmenu">
<login>
<ul>
<li> </span>
</li>
<li> Dropdown C
<ul>
<li><a href="#" >Option 1</a>
</li>
<li><a href="#" >Option 2</a>
</li>
<li><a href="#" >Option 3</a>
</li>
</ul>
</li>
</ul>
</login>
<ul>
<li> Home
</li>
<li> <a href="javascript:void(0);" >Dropdown A</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li><a href="#" >Dropdown A - 1</a>
</li>
<li><a href="#" >Dropdown A - 2</a>
</li>
</ul>
</div>
</div>
<!-- /sub-menu-inner -->
</div>
<!-- /sub-menu -->
</li>
<li> <a href="javascript:void(0);" >Dropdown B</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li> <a href="#" >Dropdown B - 1</a>
<ul>
<li><a href="#" >Dropdown B - 1 - 1</a>
</li>
</ul>
</li>
<li><a href="#" >Dropdown B - 2</a>
<ul>
<li><a href="#" >Dropdown B - 2 - 1</a>
</li>
<li><a href="#" >Dropdown B - 2 - 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sub-menu-inner -->
</div>
<!-- /sub-menu -->
</li>
<li style="float:none;overflow:hidden;">
<div class="dark width-max"> <span>
<input id="quick-search" data-load="content" data-url="/quicksearch" class="search" type="text" placeholder="Quick Search" maxlength="50" autocomplete="off">
<div id="search-results" class="search-results"></div>
</span>
</div>
</li>
</ul>
</div>
</div>
<div>
content content content content content content content content content content content content content content content content content content content content content content content content </div>
Javascript:
var currentTop = -1;
var currentSub = -1;
var currentProfile = -1;
//var topMenu = '';
//var subMenu = '';
var lastToggled = '';
function InitNav() {
//$body.on('click', '#dropmenu > ul > li > a', ToggleTop);
$('#dropmenu > ul > li > a', 'body').mouseenter(ToggleTop);
$('#dropmenu', 'body').mouseleave(ToggleTop);
$body.on('click', '#dropmenu > ul > li ul > li > a', ToggleSub);
$('#dropmenu login a', 'body').mouseenter(ToggleProfileIn).mouseleave(ToggleProfileOut);
$body.on('click', '#dropmenu login a', ToggleProfile);
}
function ToggleTop(e) {
var $listItems = $('#dropmenu > ul > li');
if (currentProfile !== -1) { // reset profile if needed
lastToggled.removeClass('toggled');
}
if (currentTop !== -1) { // reset top menu
$listItems.eq(currentTop).removeClass('toggled');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.parent('li');
var index = $item.index();
if (currentTop === index) { // reset
$item.removeClass('toggled');
currentTop = -1;
} else { // set
$item.addClass('toggled');
currentTop = index;
}
return false;
}
function ToggleSub(e) {
var $listItems = $('#dropmenu .sub-menu-inner > div > ul > li');
if (currentSub !== -1) { // reset
$listItems.removeClass('selected');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.closest('#dropmenu .sub-menu-inner > div > ul > li');
var index = $item.index();
// set
$item.addClass('selected');
currentSub = index;
return false;
}
function ToggleProfileIn(e) {
var $listItems = $('#dropmenu > ul > li');
if (currentTop !== -1) { // reset
lastToggled = $listItems.eq(currentTop).removeClass('toggled');
}
}
function ToggleProfile(e) {
currentTop = -1;
var $listItems = $('#dropmenu login > ul > li');
if (currentProfile !== -1) { // reset
$listItems.removeClass('toggled');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.closest('#dropmenu login > ul > li');
var index = $item.index();
// set
currentProfile = index;
lastToggled = $item.addClass('toggled');
return false;
}
function ToggleProfileOut(e) {
if (currentTop !== -1) { // restore
lastToggled.addClass('toggled');
}
}
InitNav();
CSS:
.navigation {
width: 100%;
height: 36px;
background-color: rgb(243, 245, 245);
}
.dropmenu {
position: relative;
width: 100%;
height: 36px;
font-weight: bold;
background: #3e494b;
/* menu background color */
}
.dropmenu ul {
list-style-type: none;
z-index: 50;
}
/* first level ul style */
/* .dropmenu > ul, */
.dropmenu .sub-menu-inner {
margin: 0 auto;
/*
background: rgb(130, 160, 46);
background: rgba(255, 160, 46, 0.92);
*/
}
.dropmenu > ul > li {
float: left;
z-index: 50;
}
.dropmenu > ul > li:nth-of-type(1) {
width: 187px;
}
.dropmenu > ul > li > a {
display: inline-block;
padding: 10px 20px;
color: #b1b6b9;
/* grey menu text color */
}
.dropmenu > ul > li > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
border-top: 3px solid;
border-top-color: #b1b6b9;
*/
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
.dropmenu > ul > li.toggled > a, .dropmenu > ul > li.toggled > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
border-top: 3px solid;
border-top-color: #b1b6b9;
*/
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
/* sub-menu */
.dropmenu .sub-menu {
display: none;
position: absolute;
/* background: #00a3da; */
width: 100%;
left: 0;
-webkit-box-shadow: 0 4px 5px -5px #000000;
-moz-box-shadow: 0 4px 5px -5px #000000;
box-shadow: 0 4px 5px -5px #000000;
}
.toggled .sub-menu {
display: block;
width: 100%;
background: #596466;
/* sub menu color */
/* border: 1px solid red; /**/
}
.dropmenu .sub-menu-inner > div {
width: 100%;
height: 100%;
float: left;
/* border: 1px solid green; /**/
}
/*
.dropmenu .sub-menu-inner > div > ul {
}
/**/
.dropmenu .sub-menu-inner > div > ul > li {
display: inline;
overflow: hidden;
position: relative;
}
.dropmenu .sub-menu-inner > div > ul > li:nth-of-type(1) {
margin-left: 187px;
}
.dropmenu .sub-menu-inner > div > ul > li > a {
padding: 10px 20px;
color: #d5d5d5;
/* border: 1px solid red; */
}
.dropmenu .sub-menu-inner > div > ul > li > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
color: #ffffff;
}
.dropmenu .sub-menu-inner > div > ul > li.selected > a, .dropmenu .sub-menu-inner > div > ul > li.selected > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
background-color: rgb(243, 245, 245);
background-color: rgba(243, 245, 245, 0.9); /* almost white */
color: #ffffff;
}
.dropmenu .sub-menu-inner:before, .dropmenu .sub-menu-inner:after {
content:" ";
display: table;
}
.dropmenu .sub-menu-inner:after {
clear: both;
}
.dropmenu .sub-menu-inner > div a {
line-height: 36px;
}
/* drop-sub-menu */
.dropmenu .sub-menu-inner ul ul {
display: none;
position: absolute;
}
.dropmenu .sub-menu-inner ul > li:hover ul {
display: block;
left: 0px;
}
.dropmenu .sub-menu-inner ul > li > ul > li > a {
display: block;
padding: 0px 20px;
width: 145px;
background: #596466;
/* sub menu color */
color: #d5d5d5;
}
.dropmenu .sub-menu-inner ul > li > ul > li > a:hover {
/* background: #798486; /* sub menu hover color */
color: #ffffff;
}
/* login menu */
.dropmenu login ul {
margin: 0;
}
.dropmenu login > ul > li {
position: relative;
float: right;
}
.dropmenu login > ul > li > a {
display: inline-block;
padding: 10px 20px;
color: #b1b6b9;
/* grey menu text color */
}
.dropmenu login > ul > li > a:hover {
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
#cart-button {
font-size: 14px;
}
/* login drop-down */
.dropmenu login ul ul {
display: none;
position: absolute;
right: 0;
top: 100%;
}
.dropmenu login ul > li:hover ul {
display: block;
}
/* login sub-menu */
.dropmenu login > ul > li > ul > li > a {
display: inline-block;
width: 100px;
padding: 10px 20px;
background: #3e494b;
/* menu background color */
color: #b1b6b9;
/* light grey */
}
.dropmenu login > ul > li > ul > li > a:hover {
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
.dropmenu login > ul > li.toggled > a, .dropmenu login > ul > li.toggled > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
background-color: #596466;
color: #ffffff;
}
.width-max {
margin: 2px 10px 0 5px;
float:none;
overflow:hidden;
}


UPDATED:
<ul class="menu">
<li id="levela">A Level 1
<ul id="sub1" class="wide">
<li>A Level 2</li>
<li>A Level 2</li>
</ul>
</li>
<li id="levelb">B Level 1
<ul id="sub2" class="wide">
<li>B Level 2</li>
<li>B Level 2
<ul class="wide_sub">
<li>B Level 3</li>
<li>B Level 3</li>
</ul>
</li>
</ul>
</li>
<li style="position: relative;">C Level 1
<ul class="normal">
<li>C Level 2</li>
<li>C Level 2
<ul class="normal_sub">
<li>C Level 3</li>
<li>C Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
css:
*, html, body {
margin: 0;
padding: 0;
line-height: 40px;
}
ul.menu {
list-style:none;
position: relative;
width: 100%;
display: block;
height: 40px;
display: inline-block;
background-color: yellow;
}
ul.menu > li {
display: block;
float: left;
padding: 0 10px;
cursor: pointer;
height: 100%;
}
ul.wide {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
background-color: grey;
width: 100%;
height: 50px;
list-style: none;
}
ul.wide li {
float: left;
padding: 5px 10px;
position: relative;
}
ul.wide li:hover ul.wide_sub {
display: block;
}
ul.wide_sub {
display: none;
position: aboslute;
top: 100%;
left: 0;
list-style: none;
background-color: green;
}
ul.wide_sub li {
float: none;
}
ul.normal {
display: none;
position: absolute;
background-color: red;
top: 100%;
left: 0;
list-style: none;
}
ul.normal li {
float: none;
position: relative;
}
ul.normal_sub {
display: none;
position: absolute;
left:100%;
top: 0;
list-style: none;
width: 200px;
background-color: blue;
}
ul.normal li:hover ul.normal_sub {
display: block;
}
.menu li:hover ul.normal {
display: block;
}
#levela:hover #sub1 {
display: block;
}
#levelb:hover #sub2 {
display: block;
}
http://jsfiddle.net/michaelyuen/twdjobmL/1/
Hope that helps


HTML
<ul>
<li>
test
<ul>
<li>
hi!
</li>
</ul>
</li>
</ul>
CSS:
ul li ul{display:none;}
ul li:hover ul{display:block;}

Related

Keep nav menu open if child item is active in a vertical list

I am working on Vertical list and list shows child item when user clicks on the parent item and also changes the color of the child item in red if it matches the URL.
I want the parent nav in open state if it's child item has an active-menu class.
I am using below script but it's not working, not sure what I am missing
Fiddle code
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').children().has('.active-menu').css('display', 'block');
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li>Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>

Corrected your script,
$('.nav-w ul li').each(function() {
if ($(this).hasClass('active-menu')) {
$(this).parents("ul").css('display', 'block');
}
})
$('.nav-w ul li') will return array of elements, you will need run loop through it to find active element then open it's parent.
I have manually added active-menu class to below li to test the code.
<li class="active-menu">Earning Releases</li>
$(".nav-w > ul > li > a").click(function() {
$(this).next().slideToggle();
});
//open active list
$('.nav-w ul li').each(function() {
if ($(this).hasClass('active-menu')) {
$(this).parents("ul").css('display', 'block');
}
})
// compare url with nav url to show active url
$(function() {
//var url = window.location.href;
var url = window.location.pathname;
var pgurl = window.location.href.substr(
window.location.href.lastIndexOf("/") + 1
);
$(".nav-w ul li a").each(function() {
if ($(this).attr("href") == url || $(this).attr("href") == "") {
$(this).addClass("active-menu");
}
});
console.log("url : " + window.location.pathname);
});
.nav-w a {
color: black;
padding: 10px 15px;
padding-left: 35px;
text-decoration: none;
display: block;
border-bottom: 1px solid #f1f1f1;
font-size: 12px;
font-weight: 600;
/* color: #178B43 !important; */
color: #757575;
}
/* ul inside content area*/
.nav-w ul {
margin-left: 0px;
list-style-type: none;
margin-bottom: 0px;
}
.nav-w ul li {
/*padding-left: 10px;*/
text-transform: uppercase;
position: relative;
width: 100%;
}
/* ol inside content area*/
.nav-w>ul {
padding-left: 0px;
padding-right: 0px;
}
.nav-w ul>li ul {
padding-left: 0px;
padding-right: 0px;
display: none;
}
.active-menu {
color: red !important;
}
.nav-w>ul li::after {
text-transform: uppercase;
content: "+";
position: absolute;
left: 15px;
top: 4px;
line-height: 30px;
font-size: 20px;
z-index: 0;
}
.nav-w>ul li ul li::after {
text-transform: uppercase;
content: "";
position: absolute;
left: 0px;
top: 5px;
line-height: 32px;
font-size: 20px;
z-index: 0;
}
.nav-w ul li ul li a {
padding-left: 45px;
}
.nav-w a:hover {
background: #f5f5f5;
border-left: 2px solid #178B43;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav-w">
<ul class="">
<li>Share Information
<ul class="" style="display: none;">
<li>Share Overview</li>
<li>Share Graph </li>
<li>Investement Calculator</li>
<li>Historical Share Prices</li>
</ul>
</li>
<li>Financial Information
<ul class="" style="display: none;">
<li class="active-menu">Earning Releases</li>
<li>Financial Statements</li>
<li><a href="/investor-relations/financial-information/presentation">Presentation
</a></li>
<li><a href="/investor-relations/financial-information/quarterly-key-figures">Quarterly Key Figures
</a></li>
<li><a href="/investor-relations/financial-information/annual-key-figures">Annual Key Figures
</a></li>
</ul>
</li>
</ul>
</div>

Show active parent with matching submenu when page is loaded jQuery

I am working on a website where I am trying to achieve the following:
When the user clicks on a link, that link shall get an active status and the matching submenu shall become active also. When the user hovers over another link the active sub menu shall not be displayed. I have achieved that the current link is in an active status that matches the url but I can't get the matching submenu to show up. I don't know much about jQuery so I might I have stumbled upon the answer without knowing it. Here is some of the code as the website is currently on localhost.
HTML:
<div class="menu-container-portal">
<a class="toggle-menu" href="#" style="display: none;">
<img src="/images/18.612e0c6d167074c5746476/1542016024414/menu-icon.png" alt="Meny"></a>
<ul class="nav">
<li class="">
Upplev & Besök
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li class="">
Bostäder
</li>
<li>
Evenemang
</li>
<li>
Kopia (1) av Upplev & Besök
</li>
<li>
Kopia (4) av Bostäder
</li>
<li>
Mat och dryck
</li>
<li>
Shopping
</li>
</div>
</ul>
</li>
<li>
Bo & Leva
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Flytta hit & Jobba
</li>
<li>
Näringsliv
<img class="arrow parent" src="/images/18.612e0c6d167074c57464a3/1542016024505/(2)%20(2)%2010897-200.png" alt="Underliggande">
<ul class="sub">
<div class="test1">
<li>
Bostäder
</li>
</div>
</ul>
</li>
<li>
Kontakta oss
</li>
</ul>
</div>
CSS:
.menu-container-portal ul {
margin: 0;
padding: 0;
}
.active {
background: #2b90f5;
overflow: hidden;
}
.menu-container-portal li:hover>a {
color: #fff;
background: #304040;
opacity: .7;
}
.menu-container-portal li {
margin: 0;
padding: 0;
/*width: 100%;*/
height: 15%;
/*display: inline-block;*/
;
}
.menu-container-portal a {
text-decoration: none;
}
.menu-container-portal a:hover {
color: #dadcdf;
background: #304040;
padding-bottom: 10px;
}
/*.menu-container-portal {
max-width: 900px;
margin: 10px auto;
}*/
/*.menu-container-portal {
max-width: 900px;
margin-right: auto;
margin-bottom: 0px;
margin-top: 20px;
margin-left: 15px;
white-space: nowrap;
text-align:left;
} */
.menu-container-portal {
max-width: 1100px;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
/* margin-left: 15px; */
white-space: nowrap;
text-align: left;
margin-left: 22.5%;
}
.toggle-menu {
display: none;
/*background: #404040;*/
padding: 10px 15px;
color: #fff;
}
.toggle-menu:hover {
opacity: 0.7;
}
.nav {
list-style: none;
*zoom: 1;
/*background:#404040;*/
display: flex;
justify-content: left;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 100%;
text-align: center;
}
.nav a {
padding: 10px 15px;
color: #101210;
*zoom: 1;
}
.nav>li {
float: left;
z-index: 200;
}
.nav>li>a {
display: inline-block;
}
.nav li ul {
display: flex;
position: absolute;
left: -99999px;
z-index: 100;
width: 100%;
/*height: 100%;*/
padding-bottom: 0.5em;
justify-content: left;
}
.nav li li a {
display: block;
/* display:inline-block; */
/*background: #404040;*/
/*position: relative;*/
z-index: 99999;
/*height: 100%;*/
width: auto;
/* width:100%; */
color: #fff;
}
.nav li li li a {
background: #404040;
/* z-index:200; */
;
}
.nav li {
/*position: relative;*/
;
}
.nav>li.hover>ul,
.nav>li.hover>ul :active {
left: 0;
overflow: hidden;
}
.nav li li.hover ul {
left: 100%;
top: 0;
overflow: hidden;
}
.arrow {
display: none;
}
.sub {
background: #304040;
opacity: 0.9;
}
ul .sub {
padding-top: 10px;
}
.menu-container-portal a:hover .nav li li li a {
background: #ff0000;
}
/* Bestämma undermenyns storlek */
.sub2 {
column-width: auto;
text-align: left;
}
.test1 {
display: inline-flex;
margin-left: 22.5%;
}
.test1-show {
display: block;
margin-left: 22.5%;
color: green !important;
}
jQuery:
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
/*$(".test1").addClass("active");
$('.nav a').filter(function(){
return this.href==location.href;}).parent()
.addClass('active').siblings().removeClass('active');
/*$(".nav > li > a").addClass("active");*/
$(document).ready(function () {
$('a(.active) a').hide();
$('a(.active)').hover(
function () {
$('.test1').hide();
},
function () {
$('.test1').show();
});
});
}
});
}
Hopefully that is all the code that is needed for you all to understand what I want and need some help with or some tips:) I think I got some of the jQuery code right I feel I am halfway there just the some little help :) thanks in advance :)
I was thinking about using one of these that I have found here:
http://jsfiddle.net/4G7TJ/1/
http://jsfiddle.net/MGkQC/7/
2019 - 01 - 21:
An update to my own post: I have come closer to my goal after alot of frustrating moments. But there is still one problem left I need to hide the submenu when I am hovering over another link here is the code so far:
jQuery:
$(document).ready(function() {
$(".nav li [href]").each(function() {
if (this.href == window.location.href) {
$(this).css("background", "red");
$(this).addClass("hover");
$(this).parent().find('ul.sub').css("left","0");
}
}); });
I was thinking about using .toggle somehow but cant really seem to get it working.

Intended you expecting the following functionality:
$("ul.nav > li > a").hover(
function(e) {
$('ul.nav > li > a.on-hover').removeClass('on-hover');
$(this).addClass('on-hover');
},
function(e){
//If you expecting to hide on-hover-out as well, uncomment the below line
//$('ul.nav > li > a.on-hover').removeClass('on-hover');
});
See in action: http://jsfiddle.net/kn761qgL/ and confirm.

superfish boostrap4 responsive

I try superfish with boostrap 4 and update for responsive using.
I inserted this code but it does'nt work well.
Do you have an idea to change the elements ?
Thanks
<style>
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
height:1.50rem;
}
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
/*** DEMO SKIN ***/
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu ul {
box-shadow: 2px 2px 6px rgba(0,0,0,.2);
min-width: 12em; /* allow long menu items to determine submenu width */
*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
border-left: 1px;
border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
border-top: 1px;
padding: .75em 1em;
text-decoration: none;
zoom: 1; /* IE7 */
}
.sf-menu a {
color: #373a3c;
font-size: 13px;
vertical-align: middle;
}
.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */
-webkit-transition: none;
transition: none;
font-size: 13px;
height:30px;
}
.sf-menu ul li {
background-color: #eee;
}
.sf-menu ul ul li {
background-color: #eee;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
/* background-color: #747474;*/
/* only transition out, not in */
-webkit-transition: none;
transition: none;
}
.backgroundSuperfish {
background-image: url(../images/menu_superfish.gif);
height:1.90rem;
}
.headerLine {
background-color: #FF0000;
height:0.05rem;
}
.current {
color:#fff;
font-size: 13px;
padding-left: 10px;
padding-top: 5px;
}
.current li:hover,
.current li.sfHove {
background-color: #FFEEC2;
color:#747474;
}
.subLevel {
color:#373a3c;
font-size: 13px;
padding-bottom: 5px!important;
}
.subLevel li:hover,
.subLevel li.sfHover{
background-color: #FFEEC2;
color:#747474;
}
.topLevel {
color:#373a3c;
font-size: 13px;
padding-bottom: 5px!important;
}
.topLevel li:hover,
.topLevel li.sfHover {
background-color: #FFEEC2;
color:#747474;
}
.imageheaderMenu {
}
</style>
html code with boostrap4
<div class="backgroundSuperfish">
<nav class="navbar">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#responsiveCollapse">☰</button>
<div class="collapse navbar-toggleable-xs" id="responsiveCollapse"> <!-- class .navbar-toggleable-* -->
<span class="pull-md-left">
<ul class="nav navbar-nav sf-menu" id="example">
<li class="nav-item current">Home
<ul>
<li class="nav-item topLevel"><span>Store</span></li>
<li class="nav-item topLevel"><span>Back Office</span></li>
</ul>
</li>
<li class="nav-item current">Configuration
<ul>
<li class="nav-item current subLevel"><span class="imageheaderMenu"><img src="/images/menu/configuration.gif" alt="" height="10" /> </span><span>My store</span>
<ul>
<li class="nav-item topLevel">General configuration</li>
<li class="nav-item topLevel">Laws & regulations</li>
</ul>
</li>
</ul>
</li>
</ul>
</span>
</div>
</nav>
</div>
the script with superfish
<script>
jQuery(function(){
jQuery('#example').superfish({
});
});
</script>

jQuery dropdown menu with css

I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?

You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle

use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});

Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>

Cannot get span position with jQuery

I have this navigation here and i need to make the submenu aligned with the topmenu anchor text.
I can do that by moving the whole inner ul to the left with css. But it's a different amount for every li element. Since my anchor needs to be as big as the li i created a span around the text and my plan was to measure its distance form the parent and apply that number to left property of the inner ul. This is what i have so far:
jQuery(document).ready(function(){
menuAlign();
});
function menuAlign(){
$('nav.main-nav > ul > li:not(.small)').each(function(){
var self = $(this);
var innerMenu = self.children('ul');
var posOffset = self.children('.pos').position();
innerMenu.css( "left", posOffset.left );
});
}
I get an error on this line innerMenu.css( "left", posOffset.left ); saying:
Uncaught TypeError: Cannot read property 'left' of undefined
What am I doing wrong? Is there a way to achieve this with CSS?

I changed your menuAlign() function slightly, because I think it was looking the span with class="pos" in a different place where it actually was. Hopefully it's working in improved fashion :-) fiddle
function menuAlign() {
$('nav.main-nav > ul > li:not(.small)').each(function () {
var self = $(this);
var innerMenu = self.children('ul');
var parent = innerMenu.parent();
var posLeft = parent.find(".pos").position().left;
innerMenu.css("left", posLeft);
});
}

Removing the margin from nav.main-nav > ul > li > ul might help you. FIDDLE. I also added some padding to nav.main-nav > ul > li > ul > li.
.clearfix:after {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
/* trick for navigation */
}
nav.main-nav > ul {
padding: 0;
background-color: #f6a000;
border-bottom: 1px solid #fff;
}
nav.main-nav > ul > li {
display: inline-block;
position: relative;
z-index: 100;
width: 30%;
height: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #fff;
float: left;
}
nav.main-nav > ul > li.small {
width: 2%;
}
nav.main-nav > ul > li > a {
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 60px;
font-size: 16px;
color: #fff;
}
nav.main-nav > ul > li > ul {
position: absolute;
left: 0;
top: 100%;
width: 100%;
padding: 0;
_margin: 0 -1000em;
z-index: 101;
visibility: hidden;
opacity: 0;
background-color: #F67900;
list-style: none;
}
nav.main-nav > ul > li:hover {
background-color: #F67900;
}
nav.main-nav > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
nav.main-nav > ul > li > ul > li {
padding: 20px;
}
nav.main-nav > ul > li > ul > li > a {
color: #fff;
font-size: 16px;
}
nav.main-nav > ul > li:hover .drop {
font-weight: bold;
}
<nav class="main-nav">
<ul class="clearfix">
<li> <span class="pos">about us</span>
<ul>
<li>who we are
</li>
<li>what we do
</li>
<li>where we are
</li>
<li>other information
</li>
</ul>
</li>
<li> <span class="pos">accomodation</span>
<ul>
<li>apartments
</li>
<li>hotels
</li>
</ul>
</li>
</ul>
</nav>

Categories