How could I make a menu dropdown on click - javascript

how could I make my menu drop down when i click on it instead of hover?
I want to be able to click on .logo and have the ul dropdown. and to also hide the menu when i click on it again. The div inside .logo is just a triangle pointing down.
html code:
<div id='Logo_dropdown'>
<ul>
<li class='logo'><a href='#'><div></div></a></li>
<ul>
<li><a href='#upload'><span>Upload Logo</span></a></li>
<li><a href='#Edit'><span>Edit Logo</span></a></li>
</ul>
</div>
CSS code:
#Logo_dropdown ul {
padding: 0;
margin-left:auto;
margin-right:auto;
position:absolute;
top: 50%;
margin-top: -30px;
font-size:14px;}
#Logo_dropdown li {
margin: 0;
padding: 0;}
#Logo_dropdown a {
margin: 0;
padding: 0;
}
#Logo_dropdown ul {
list-style: none;
}
#Logo_dropdown a {
text-decoration: none;
}
#Logo_dropdown {
height: 50px;
position:absolute ;
background: #FCFCFC;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
left:200px;
opacity:0.9;
filter:alpha(opacity=90);
padding-left:1%;
padding-right:auto;
width: 190px;
/* background-color:#F3F3F3 ; /*color for Nav Menu Bar
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);*/
width: 140px;
z-index:1;
}
#Logo_dropdown > ul > li {
float: left;
position: relative;
left:140px;}
#Logo_dropdown > ul > li > a {
color: #999;
font-family: Verdana, 'Lucida Grande';
font-size: 12px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#Logo_dropdown > ul > li > a:hover {
color:#2bafb8; /*color nav menu bar when mouse hovers*/
}
#Logo_dropdown > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 80%;
margin-left: -90px;
width: 250px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
width:100px;
}
#Logo_dropdown > ul > li:hover > ul {
opacity: 1;
top: 95px; /*position of hover li*/
z-index:1;
overflow: visible;
}
#Logo_dropdown > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#Logo_dropdown > ul ul > li {
position: relative;
overflow: visible;
}
#Logo_dropdown ul ul a {
color: #2bafb8;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#Logo_dropdown ul ul a:hover {
background-color: #f0f0f0;
}
#Logo_dropdown ul ul a:hover {
background-color: #2bafb8;
color: #f0f0f0 !important;
}
div{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #CCC;
}

You can use simply toggle() to view the dropdown :)
I want to be able to click on .logo and have the ul dropdown
Use this :
$('.logo').click(function () {
$('#logodropdown ul.second').toggle();
}
This way, it will show it if hidden, and hide it if visible. You can also set some speed if you want, inside the parathesis as toggle(time in milliseconds).
And please change the second ul to <ul class="second"> as the code might misunderstand your approach and hide both of the lists in the #logodropdown. This would be a good approach to what you want to happen! Or even use a class to differentiate between both the lists.
You can use CSS to do some stuff like :active or :focus. But they won't cause a change in the properties of other elements. That's where you need a help of jQuery. :)

For click you will need to use Javascript, as there is no click event handling in CSS.

Related

Problems with my menu

I hope the following problem won't give you a headache because it is too late for me. Anyway, I am creating a menu for my website but there is a problem: when you switch to mobile view, the menu displays at the top of the first page and when you press the hamburger icon it displays under it. It should not display at all, only when the button is pressed, you also see a weird animation when it switches to mobile view.
HTML:
<header>
<nav>
<ul id="nav" style="top:-15rem;">
<li class="nav_link">HOME</li>
<li class="nav_link">ABOUT</li>
<li class="nav_link">WORK</li>
<li class="nav_link">CONTACT</li>
</ul>
<div id="bg_fix" class="shadow_on">
<a id="logo"> <span class="font">Nadia</span> <img src="images/logo.png" alt="logo"></a>
<div id="burger"> <span></span> <span></span> <span></span> </div>
</div>
</nav>
</header>
CSS:
p, h1, h2, h3, h4, li, a, button {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #3d3d3d;
}
a {
text-decoration: none;
}
.font {
font-family:'Montserrat', sans-serif;
font-size:30px;
}
header {
background-color: #ffffff;
display: inline;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:100;
}
#bg_fix {
padding: 0.5em 1em 0.5em;
display: block;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1;
transition: all 0.7s ease-in-out;
}
.shadow_on {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav {
transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav li {
cursor: pointer;
display: block;
border-bottom: 1px #E5E5E5 solid;
text-decoration: none;
text-align: center;
color: #3d3d3d;
padding: 1rem 0;
background-color: #ffffff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#nav li:last-child {
border-bottom: 0;
}
#nav li:active {
background-color: #E5E5E5;
}
#logo {
display: inline-block;
cursor: pointer;
}
#logo img {
height: 2rem;
}
#burger {
margin-top: 0.6rem;
float: right;
display: inline;
width: 1.4em;
vertical-align: middle;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#burger span {
display: block;
height: 0.15rem;
margin-top: 0.3rem;
width: 100%;
background-color: #3d3d3d;
opacity: 1;
left: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#burger span:first-child {
margin-top: 0;
}
#burger.open span {
background-color: #2C9FD1;
}
#media (min-width: 44em) {
header {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
box-shadow: 0px 0.25em 0.2em -0.2em rgba(61,61,61,0.37);
z-index: 1;
}
nav {
max-width: 95rem;
display: block;
margin: 0 auto;
}
#burger {
display: none;
}
#logo {
float: right;
padding: 0.5rem 0;
margin-right: 2rem;
margin-top: 0.2rem;
}
#nav {
padding: 0.5rem 0;
transition: none;
top: 0 !important;
position: static;
display: inline-block;
width: 70%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: 3rem;
margin-top: 1.4rem;
padding: 0;
}
#nav li {
border-bottom: 0;
margin-right: 2.5rem;
font-size: 1.1rem;
transition: all 0.1s ease-in-out;
display: inline-block;
position: relative;
padding: 0.3rem 0;
}
#nav li {
display: inline;
}
#nav li:active {
background-color: #ffffff;
}
#nav li:hover a, #nav li:active a{
opacity:0.5;
}
#bg_fix {
transition: none;
padding: 0;
display: inline;
position: static;
}
#logo {
margin-top: 0.1rem;
padding: 0.7rem 0;
}
#logo img {
height: 2.3rem;
}
}
JS:
var burger = document.getElementById("burger");
var nav = document.getElementById("nav");
var navLinks = document.getElementsByClassName("nav_link");
var bgFix = document.getElementById("bg_fix");
var logo = document.getElementById("logo");
burger.onclick = function() {
burger.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
if (nav.style.top === "-15rem") {
nav.style.top = "3rem";
} else {
nav.style.top = "-15rem";
}
}
function markSelection() {
burger.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
nav.style.top = "-15rem";
}
for (i = 0, len=navLinks.length; i < len; i++) {
navLinks[i].onclick = markSelection;
}
fiddle: https://jsfiddle.net/gu0j8r57/
It is hard to see here because there is only one page but you can definetely see the menu appear on the page above the menu and it's driving me crazy, you can see the weird animation when it switches to mobile view tho.
Edit: updated jsfiddle so you can see the menu appear above it on mobile view
You need to mark #nav has open. The transition: all 0.7s ease-in-out; should only happen on #nav.open
JS: (jsFiddler)
var burger = document.getElementById("burger");
var nav = document.getElementById("nav");
var navLinks = document.getElementsByClassName("nav_link");
var bgFix = document.getElementById("bg_fix");
var logo = document.getElementById("logo");
burger.onclick = function() {
burger.classList.toggle("open");
nav.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
if (nav.style.top === "-15rem") {
nav.style.top = "3rem";
} else {
nav.style.top = "-15rem";
}
}
function markSelection() {
burger.classList.toggle("open");
nav.classList.toggle("open");
bgFix.classList.toggle("shadow_on");
nav.style.top = "-15rem";
}
for (i = 0, len=navLinks.length; i < len; i++) {
navLinks[i].onclick = markSelection;
}
CSS:
p, h1, h2, h3, h4, li, a, button {
font-family: 'Montserrat', sans-serif;
font-size: 1rem;
color: #3d3d3d;
}
a {
text-decoration: none;
}
.font {
font-family:'Montserrat', sans-serif;
font-size:30px;
}
header {
background-color: #ffffff;
display: inline;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index:100;
}
#bg_fix {
padding: 0.5em 1em 0.5em;
display: block;
position: absolute;
left: 0;
right: 0;
background-color: #ffffff;
z-index: 1;
transition: all 0.7s ease-in-out;
}
.shadow_on {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav {
// transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav.open {
transition: all 0.7s ease-in-out;
position: absolute;
top:-15rem;
background-color: #ffffff;
left: 0;
right: 0;
padding:0;
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
box-shadow: 0px 0.1em 0.2em 0px rgba(61,61,61,0.37);
}
#nav li {
cursor: pointer;
display: block;
border-bottom: 1px #E5E5E5 solid;
text-decoration: none;
text-align: center;
color: #3d3d3d;
padding: 1rem 0;
background-color: #ffffff;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#nav li:last-child {
border-bottom: 0;
}
#nav li:active {
background-color: #E5E5E5;
}
#logo {
display: inline-block;
cursor: pointer;
}
#logo img {
height: 2rem;
}
#burger {
margin-top: 0.6rem;
float: right;
display: inline;
width: 1.4em;
vertical-align: middle;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#burger span {
display: block;
height: 0.15rem;
margin-top: 0.3rem;
width: 100%;
background-color: #3d3d3d;
opacity: 1;
left: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
#burger span:first-child {
margin-top: 0;
}
#burger.open span {
background-color: #2C9FD1;
}
#media (min-width: 44em) {
header {
-webkit-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
-moz-box-shadow: box-shadow: 0px 0.1em 0.2em -0.2em rgba(61,61,61,0.37);
box-shadow: 0px 0.25em 0.2em -0.2em rgba(61,61,61,0.37);
z-index: 1;
}
nav {
max-width: 95rem;
display: block;
margin: 0 auto;
}
#burger {
display: none;
}
#logo {
float: right;
padding: 0.5rem 0;
margin-right: 2rem;
margin-top: 0.2rem;
}
#nav {
padding: 0.5rem 0;
transition: none;
top: 0 !important;
position: static;
display: inline-block;
width: 70%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin-left: 3rem;
margin-top: 1.4rem;
padding: 0;
}
#nav li {
border-bottom: 0;
margin-right: 2.5rem;
font-size: 1.1rem;
transition: all 0.1s ease-in-out;
display: inline-block;
position: relative;
padding: 0.3rem 0;
}
#nav li {
display: inline;
}
#nav li:active {
background-color: #ffffff;
}
#nav li:hover a, #nav li:active a{
opacity:0.5;
}
#bg_fix {
transition: none;
padding: 0;
display: inline;
position: static;
}
#logo {
margin-top: 0.1rem;
padding: 0.7rem 0;
}
#logo img {
height: 2.3rem;
}
}
HTML I didn't modify your html
<header>
<nav>
<ul id="nav" style="top:-15rem;">
<li class="nav_link">HOME</li>
<li class="nav_link">ABOUT</li>
<li class="nav_link">WORK</li>
<li class="nav_link">CONTACT</li>
</ul>
<div id="bg_fix" class="shadow_on">
<a id="logo"> <span class="font">Nadia</span> <img src="images/logo.png" alt="logo"></a>
<div id="burger"> <span></span> <span></span> <span></span> </div>
</div>
</nav>
</header>

I have a drop down menu now how to create submenu inside one link using css

I am very new to css trying to learn new language, I have a dropdowm which i had done using css and html now how to create a submenu into it on hover over one link
Check my code till now what i did :
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #fff;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>
So when user hover on Menu dropdown should come and when user hover in dropdown sub-drop down should come
Thanks in advance!!!
You should hide the sub-menu and show it when you hover on the link, just like the first dropdown
add this code to your css file
ul.dropdown li ul {
display:none;
}
ul.dropdown li.dropdown:hover ul {
display:block;
}
See working snippet:
.nav-collapse .nav li a {
font-size: 13px;
color: #7281a1;
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
text-shadow: none;
padding: 25px 15px 26px 30px;
}
.nav-collapse .nav>li {
margin-left: 3px;
position: relative;
}
.nav-collapse .nav li a#home-nav {
background: url('../images/home.png') 3px center no-repeat;
}
.nav-collapse .nav li a:hover {
text-decoration: underline;
color: #7281a1;
}
ul.dropdown {
position: absolute;
width: 150px;
background: #ccc;
top: 110%;
left: 0;
border-top: 2px solid #8248ac;
visibility: hidden;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
ul.dropdown:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 5px solid #8248ac;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
left: 20px;
top: -10px;
}
ul.dropdown li {
border-top: 1px solid #f7f8f9;
}
ul.dropdown li:first-child {
border-top: none;
}
ul.dropdown li a {
display: inline-block;
padding: 10px 7px !important;
}
.nav-collapse .nav>li:hover ul.dropdown {
visibility: visible;
top: 100%;
}
ul.dropdown li ul {
position: absolute;
left: 100%;
top: -2px;
background: #ccc;
width: 100%;
border-top: 2px solid #8248ac;
display: none;
}
ul.dropdown li.dropdown:hover ul {
display: block;
}
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a id="home-nav" href="#">Menu</a>
<ul class="dropdown">
<li class="dropdown">Dropdown
<ul>
<li>sub-dropdown</li>
</ul>
</ul>
</li>
</ul>
</div>

I'm attempting to create a vertical menu with flyouts

I've spent all night attempting to create this. I finally got it to where it will display a flyout, but all of the dimensions are wrong, and I'm obviously not understanding the hierarchy of css here. My end goal is for it to look like this. (Vertical, color scheme, pretty icons) What I want it to look like. But I want it to act like this.
HTML:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><script type="text/javascript" src="js/menu.js"></script><script type="text/javascript">$(document).ready(function(){$(".menu").menu({speed: 400,type: "vertical",});});</script>
<body>
<div class="content">
<ul class="menu">
<li class="active"><a href="JavaScript:void(0)"><i class="icon-dashboard">
</i>Dashboard</a></li>
<li><i class="icon-servers"></i>Servers
<ul>
<li>View Virtual Servers</li>
<li>Add Virtual Servers</li>
</ul>
</li>
<li><i class"icon-user"></i>Users</li>
</ul>
</div>
</body>
CSS:
#import "./font-awesome.css";
#import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro');
.menu {
position: relative;
float: left;
height: 100%;
top: 0;
left: 0;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source Sans Pro", Segoe UI, Arial;
list-style: none;
background: #303641;
box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu li {
display: inline;
position: relative
float: left;
height: 2.5em;
line-height: 2.5em;
width: 4em;
margin: 0;
padding: 0;
font-size: 12px;
}
.menu>li>a {
display: block;
padding: 20px 22px;
color: #aaabae;
text-align: center;
text-decoration: none;
text-transform: uppercase;
text-indent: -500em;
border-bottom: 1px solid rgba(170, 171, 174, 0.15);
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
.menu li:hover>a, .menu li.active a {
background: #2b303a;
color: #fff
}
.menu li.right {
float: right
}
.menu ul, .menu ul li ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99999;
width: 4em;
background: #303641;
box-shadow: 0 1px 1px rgba(0,0,0,0.3)
}
.menu ul {
top: 60px;
left: 0
}
.menu ul li ul {
top: 0;
left: 100%
}
.menu ul li {
clear: both;
width: 4em;
border: 0;
font-size: 12px
}
.menu ul li a {
padding: 10px 20px;
width: 4em;
color: #dedede;
font-size: 13px;
text-decoration: none;
display: inline-block;
float: left;
clear: both;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: color .2s linear, background .2s linear;
-moz-transition: color .2s linear, background .2s linear;
-o-transition: color .2s linear, background .2s linear;
transition: color .2s linear, background .2s linear
}
menu>li.showhide {
display: none;
width: 4em;
height: 2.5em;
cursor: pointer;
color: #dedede;
border-bottom: solid 1px rgba(0,0,0,0.1);
background: #303641;
}
menu>li.showhide span.title {
margin: 16px 0 0 25px;
float: left
}
.menu>li.showhide span.icon {
margin: 17px 20px;
float: right
}
.menu>li.showhide .icon em {
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #ccc
}
.menu.vertical {
width: 4em;
}
.menu.vertical li {
width: 4em;
}
.menu.vertical li a {
display: inline-block!important;
width: 4em;
padding: 18px 20px 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box
}
.menu.vertical ul li {
width: 4em;
}
.menu.vertical ul, .menu.vertical ul li ul {
width: 4em;
}
.menu.vertical ul {
top: 0;
left: 100%
}
.menu.vertical ul li ul {
top: 1px
}
JavaScript:
$.fn.menu=function(e){function r(){$(".menu").find("li").unbind();$(".menu").find("ul").hide(0);if(window.innerWidth<=768){o();s();if(n==true){a();n=false}}else{u();i();if(t.type=="horizontal"&&t.align=="right"&&n==false){a();n=true}}}function i(){$(".menu li").bind("mouseover",function(){$(this).children("ul").stop(true,true).fadeIn(t.speed)}).bind("mouseleave",function(){$(this).children("ul").stop(true,true).fadeOut(t.speed)})}function s(){$(".menu > li").bind("click",function(){if($(this).children("ul").css("display")=="none"){$(this).find("ul").slideDown(t.interval)}else{$(this).children("ul").slideUp(t.interval)}})}function o(){$(".menu > li:not(.showhide)").hide(0);$("-menu > li.showhide").show(0);$(".menu > li.showhide").bind("click",function(){if($(".menu > li").is(":hidden")){$(".menu > li").slideDown(300)}else{$(".menu > li:not(.showhide)").slideUp(300);$(".menu > li.showhide").show(0)}})}function u(){$(".menu > li").show(0);$(".menu > li.showhide").hide(0)}function a(){$(".menu > li").addClass("right");var e=$(".menu").width();var t=$(".menu").children("li");var n=0;$(".menu").children("li:not(.showhide)").detach();for(var r=t.length;r>=1;r--){$(".menu").append(t[r])}}var t={speed:300,type:"horizontal",align:"left"};$.extend(t,e);var n=false;if(t.type=="vertical"){$(".menu").addClass("vertical");if(t.align=="right"){$(".menu").addClass("right")}}$(".menu").prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");r();$(window).resize(function(){r()})}
Thank you in advance for any help you provide! I appreciate anything :)
A few things need to be reset.
Remove overflow: hidden from the ul.menu. Otherwise your flyouts will be... hidden. :)
Set the .menu>li to position: relative and then the sub uls to position: absolute offsetting however you need to.
Make sure you're targeting specific <a> elements with your initial css by using child selectors instead of decendant selectors. That is, use .menu > li > a vs .menu li a. The former will only target as that are children of the lis that are children of .menu. The latter will target all as that are descendant of all lis that are descendants of .menu which will include your flyout's <a>s.
This fiddle should get your started.

Make navbar stick upon scrolling to position

I am trying to make my website's navigation bar stick to the top of the page after scrolling to it along with the header image.
So far the code I have is:
<html>
<head>
<link href="C:\Users\Karl\Desktop\New Bistro\menu_assets\styles.css" rel="stylesheet" type="text/css">
<style>
.header{
height:70%;
background-image:url('http://s22.postimg.org/4eags0oep/header.png');
background-size: cover;
width:100%;
}
.nav{
height:8%;
width:100%;
}
.body{
height:100%;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/6/60/Solna_Brick_wall_Silesian_bond_variation1.jpg');
}
.logo {
background-image:url('Title.png');
margin-left:auto;
margin-right:auto;
height:140px;
width:554px;
right:35%;
position:fixed;
z-index:9999
}
</style>
</head>
<body background="http://htmlgiant.com/wp-content/uploads/2010/09/A-grey.jpeg" style="margin: 0; padding: 0;">
<div class="header">
<div class="logo"></div>
</div>
<div class="nav">
<div id='cssmenu'>
<ul>
<li><a href='http://www.132glenbistro.com/'><span>Home</span></a></li>
<li><a href='http://www.132glenbistro.com/'><span>Menu</span></a></li>
<li><a href='http://www.132glenbistro.com/'><span>Gallery</span></a></li>
<li class='last'><a href='http://www.132glenbistro.com/'><span>Contact</span></a></li>
</ul>
</div>
</div>
<div class="body">
<div align="center">
<table width="70%" style="height: 200%;" cellpadding="10" cellspacing="0" border="1">
<tr>
<td colspan="2" style="height: 100px;" bgcolor="#ffffff">
</td></tr></table>
</div>
</div>
</body>
</html>
My css file is:
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
I have tried using javascript to do this to no avail. I am new to javascript programming in general any help would be appreciated.
http://getbootstrap.com/javascript/#affix
Bootstrap provides this feature called "Affix". Even if you only use this aspect I think it would be much more beneficial to use Bootstrap than try to do it yourself. Or you can look at the source to get an idea of how they do it.
Either way without seeing your attempts I don't see how we're supposed to help you.

Open submenu only after click on parent

I think my problem has been answered many times before, but I can't find exactly my case.
I have a vertical menu with submenus and I want to show the submenu only if the parent was clicked (not hovered), showing only one submenu at a time and after click somewhere out the menu, I want the submenu to disappear.
This is what I've got now - it is based on hovering now. I tried to change a:hover to something like a:active, but it doesn't work well (I am not very good in CSS).
/* The container */
#cssmenu > ul {
display: block;
position: relative;
//width: 190px;
width: 100%;
}
/* The list elements which contain the links */
#cssmenu > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 100%;
}
/* General link styling */
#cssmenu > ul li a {
display: block;
position: relative;
margin: 2;
width: 95%;
height: 50px;
background-color: #abc578;
border-left: solid 0px #ffffff;
border-bottom: solid 1px #ffffff;
font: 0.7em Tahoma, sans-serif;
font-size: 14px;
font-weight: bold;
color: #ffffff;
text-decoration: none;
padding-top: 30px;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li > a:hover,
#cssmenu > ul li:hover > a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
background: #82c500;
background: -webkit-linear-gradient(bottom, #82c500, #000000);
background: -ms-linear-gradient(bottom, #82c500, #000000);
background: -moz-linear-gradient(bottom, #82c500, #000000);
background: -o-linear-gradient(bottom, #82c500, #000000);
border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
content: "";
position: absolute;
top: 34px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
content: "";
position: absolute;
top: 35px;
right: 8px;
width: 0px;
height: 0px;
/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
border-left: 4px solid rgba(0, 0, 0, 0.3);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
position: absolute;
left: 95%;
width: 100%;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
top: -2px;
opacity: 1;
}
Does anyone have some idea please?
OK, I used this to solve my problem: How do I detect a click outside an element?
Now I have something like this in the footer of website:
$('html').click(function() {
hideSubMenu();
});
$("#cssmenu").click(function(event){
event.stopPropagation();
});
And when I clicked on submenu, I call subMenu function that shows submenu:
<div id='cssmenu'>
<ul>
<li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
...

Categories