Dropdown menu with arrow - javascript

Perhaps this is an easy matter, but I still couldn't find a solution. I tried following example from internet using menu arrow on drop-down. The problem is that all the sub-menus go down to the bottom (show), while should only show clicked menu's submenu.
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style>
.sub-menu ul > li {
z-index:-1;
opacity:0;
display:none;
}
.drop {
display: inline-block;
transition: all .25s
}
.slicknav_nav.active li > .drop {
transform: rotate(180deg)
}
.slicknav_nav.active li > .sub-menu > ul > li{
z-index:1;
opacity:1;
display:block;
}
</style>
</head>
<body>
<div class="slicknav_menu">
<ul class="slicknav_nav">
<li>
Movies
<a class="drop">▼</a>
<div class="sub-menu">
<ul>
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</div>
</li>
<li>
Movies2
<a class="drop">▼</a>
<div class="sub-menu">
<ul>
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
$(".slicknav_nav").click(function() {
$(this).hasClass("active") ?
$(".slicknav_nav").removeClass("active") :
($(".slicknav_nav").removeClass("active"), $(this).addClass("active"));
});
</script>
</body>
</html>
Can some one solve the problem? I hope it does not change the structure.

You have couple of issues in your code:
Add click handler on li instead of ul.
Toggle active class on li.
In click handler, remove active class from all lis, then just add to current li.
Updated Code:
$(".slicknav_nav li").click(function() {
$(".slicknav_nav li").removeClass('active');
$(this).addClass('active');
});
.sub-menu {
z-index: -1;
opacity: 0;
display: none;
}
.drop {
display: inline-block;
transition: all .25s;
}
.slicknav_nav li.active > .drop {
transform: rotate(180deg);
}
.slicknav_nav li.active > .sub-menu {
z-index: 1;
opacity: 1;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slicknav_menu">
<ul class="slicknav_nav">
<li>
Movies<a class="drop">▼</a>
<div class="sub-menu">
<ul>
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</div>
</li>
<li>
Movies2<a class="drop">▼</a>
<div class="sub-menu">
<ul>
<li>In Cinemas Now</li>
<li>Coming Soon</li>
<li>On DVD/Blu-ray</li>
<li>Showtimes & Tickets</li>
</ul>
</div>
</li>
</ul>
</div>
Fiddle DEMO

Related

Keep Background color when hover other elements

I have the HTML structure below for a menu,
I try to keep the color of the background div when the user navigates in the sub list
any ideas ?
ThankYou.
.color1 > div:hover {
background-color: yellow;
}
.sub{
display: none;
}
.globalList:hover .sub {
display: block !important;
}
<html>
<body>
<ul class="MyList">
<li class="globalList color1">
<div>Menu1</div>
<ul class="sub">
<li class="Sub1"><div>Sublist1</div></li>
<li class="Sub2"><div>Sublist2</div></li>
</ul>
</li>
<li>
<div>Menu2</div>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
Have the hover style on the li tag instead
.color1:hover > div {
background-color: yellow;
}
Unless you also wanted the submenu to have the bg color, in that case move it inside your div
Something like this?
.color1 > div:hover {
background-color: yellow;
}
.sub{
display: none;
}
.globalList:hover .sub {
display: block !important;
}
<html>
<body>
<ul class="MyList">
<li class="globalList color1">
<div>Menu1
<ul class="sub">
<li class="Sub1"><div>Sublist1</div></li>
<li class="Sub2"><div>Sublist2</div></li>
</ul>
<!-- MOVE </> DIV OVER HERE! -->
</div>
</li>
<li>
<div>Menu2</div>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>

Expand/collapse a menu list animated and only with CSS

Here's what I'm trying to make:
Click on "PORTFOLIO";
Pushes everything down smoothly;
New links fade-in smoothly;
Click on "PORTFOLIO" again, do everything in reverse;
My current code;
$(function () {
$('[data-toggle]').on('click', function () {
var id = $(this).data("toggle"),
$object = $(id),
className = "open";
if ($object) {
if ($object.hasClass(className)) {
$object.removeClass(className)
} else {
$object.addClass(className)
}
}
});
});
#list {
display: none;
}
#list.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>Home </li>
<li>A Empresa </li>
<li>Portfolio
<ul id="list">
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato </li>
</ul>
</nav>
It's possible to accomplish this without JS, only with CSS? I have no clue whatsoever how to do the animation part, I tried CSS Transitions propriety, but didn't work.
Also, any tips for the markup and JS? I don't thinks I'm doing it the "right way"... any tips would be appreciated.
With only CSS you may use :focus and eventually pointer-events if you want a toggle effect :
#list {
max-height: 0;
overflow: hidden;
transition: 0.5s linear;
}
a:focus+#list {
max-height: 15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}
<nav>
<ul>
<li>Home </li>
<li>A Empresa </li>
<li>Portfolio
<ul id="list">
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato </li>
</ul>
</nav>
You can even do this very little CSS without class nor id :
ul a +ul {
max-height:0;
overflow:hidden;
transition:0.5s linear;
}
ul a:focus + ul {
max-height:15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}
<nav>
<ul>
<li>Home
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>A Empresa
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li><a href="#nowhere" >Portfolio</a>
<ul>
<li>Comerciais </li>
<li>Residenciais </li>
<li>Institucionais </li>
<li>Edifícios </li>
</ul>
</li>
<li>Contato
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</nav>
I have created the menu only using css please check the following fiddle https://jsfiddle.net/dwgpqncw/2/ also the code for the same is posted below
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css menu</title>
<style>
*{margin:0; padding:0;}
ul{font-family:Arial, Helvetica, sans-serif;}
ul li ul{height:0px; transition:500ms all;-webkit-transition:500ms all;-moz-transition:500ms all;-o-transition:500ms all;overflow:hidden;}
ul li ul li{ transition:1300ms all;-webkit-transition:1300ms all;-moz-transition:1300ms all;-o-transition:1300ms all;opacity:0}
a{color:#000; text-transform:uppercase;}
ul li ul li a{color:red;}
/*set the height to 0 and on focus set the height to pixels calculation based on the line height*/
ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1){height:0px;overflow:hidden;}
ul li ul li{line-height:30px;font-size:16px;}
ul li .expandable{font-size:20px; line-height:35px; text-decoration:none; padding-left:20px; }
ul li .expandable:hover{text-decoration:underline;}
ul li ul li:before{padding-left:20px; content:"-"; font-size:16px; margin-left:20px}
ul li .expandable:focus{color:red;}
ul li .expandable:focus +ul:nth-child(1){height:90px;}
ul li .expandable:focus +ul:nth-child(2){height:120px;}
ul li .expandable:focus +ul:nth-child(3){height:60px;}
ul li .expandable:focus +ul:nth-child(4){height:120px;}
ul li .expandable:focus +ul:nth-child(1) li,ul li .expandable:focus +ul:nth-child(2) li,ul li .expandable:focus +ul:nth-child(3) li,ul li .expandable:focus +ul:nth-child(4) li{opacity:1;}
</style>
</head>
<body>
<ul>
<li>
Home
<ul>
<li>Home link 1</li>
<li>Home link 2</li>
<li>Home link 3 </li>
</ul>
</li>
<li>
A Empressa
<ul>
<li>Empressa link 1</li>
<li>Empressa link 2</li>
<li>Empressa link 3 </li>
<li>Empressa link 4 </li>
</ul>
</li>
<li>
Protfolio
<ul>
<li>Protfolio link 1</li>
<li>Protfolio link 2</li>
</ul>
</li>
<li>
Contato
<ul>
<li>Contato link 1</li>
<li>Contato link 2</li>
<li>Contato link 3 </li>
<li>Contato link 4 </li>
</ul>
</li>
</ul>
</body>
</html>

Navigation roll-over needs to be same color when going down to sublinks

I have a project that requires me to add drop-down navigation. I am using GUMBY and have added the drop-downs.
The problem I am having is as you rollover each main navigation link- the sub-links drop-down but once you mouse over the sub-links - the main navigation color switches back. I've tried to stylize a mouse out event but that doesn't work.
How can I keep the main nav link the same color when you mouseover the sub-links?
http://ffresearch.com/who-we-are-dropdown.html
<style type="text/css">
#nav-orange li a:hover, #nav-orange li:hover a {
background-color: #fac55f !important;
color: white;
}
a.drkgreen:hover { background-color: #1f9390 !important; }
a.ltgreen:hover { background-color: #b3d88c !important; }
a.orange { background-color: #ffffff !important; }
a.orange:hover { background-color: #fac55f !important; }
a.ltblue { background-color: #ffffff !important; }
a.ltblue:hover { background-color: #26bfd0 !important; }
a.grey:hover { background-color: #8a949b !important; }
a.red:hover { background-color: #f16767 !important; }
a.red { background-color: #ffffff !important; }
</style>
<div class="navbar" gumby-fixed="top" id="nav1" style="background-image: url(img/white_banner_shadow4.png); background-position:bottom; background-repeat:repeat;">
<div class="row" >
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="index.html">
<img src="img/FFR-logo3.png" gumby-retina />
</a>
</h1>
<ul class="eight columns" style="margin-top:30px;">
<li class="active">Our Difference</li>
<li style="background-color:#b3d88c; color:#FFF !important;" >Who We Are
<span class="not_mobile"><div class="dropdown">
<ul>
<li>Our Mission</li>
<li>Our Leadership</li>
</ul>
</div></span>
</li>
<li id="nav-orange">What We Do
<span class="not_mobile"><div class="dropdown">
<ul >
<li >Overview</li>
<li>Unique Research Services</li>
</ul>
</div></span>
</li>
<li>Our Capabilities
<span class="not_mobile"><div class="dropdown">
<ul>
<li>Experience</li>
<li>Qualitative</li>
<li>Quantitative</li>
<li>Support Services</li>
</ul>
</div></span>
</li>
<li>Connect</li>
<li>Tips and Tools
<span class="not_mobile"><div class="dropdown">
<ul>
<li>ProTalk™</li>
<li>Best Practice Tips</li>
</ul>
</div></span>
</li>
</ul>
</div>
</div>
in your CSS
change .navbar ul li > a:hover to .navbar ul li:hover > a
and a.orange:hover to li:hover > a.orange
and like so ..
Hope this will help you ..

Submenu disappears as soon as I reach it with a mouse

I have a menu and a submenu. I got it toggled in Jquery by combining some answers from stackoverflow and from api.jQuery. But now I am really stuck and I cant find a way out to solve it.
Whenever I reach the menu, submenu toggles(Good thing), but whenever I reach for the submenu links it disappears.
And it doesnot work in fiddle because of the styling, thats why I didnt put it there.
HTML
<ul id="menüü">
<li class="menu">
<p>Meist
</p>
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
<p>Seadmed
</p>
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
<div id="submenu"></div>
CSS
.menu {
display: inline;
float:left;
width:180px;
height:50px;
color:#191919;
text-align:center;
background:#990000;
-moz-border-radius-top-left: 50px;
border-top-left-radius: 50px;
position:relative;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:62px;
right:25%;
z-index:300
}
.submenu {
background-color:#cecece;
}
.submenu > li {
list-style-type:none;
background-color:#fff;
color:blue;
cursor:pointer;
}
#submenu {
color:white;
height:40px;
width:900px;
background:#630000;
margin-top:50px;
position:relative;
}
JS
$(document).ready(function () {
$("li.menu").mouseenter(function () {
$(this).find(".submenu").toggle();
});
});
Change mouseenter to mouseover then when you hover a child element it will not close. And use mouseover to show and mouseout to hide.
Example on jsFiddle
$(document).ready(function ()
{
$(".menu").mouseover(function ()
{
$(this).find(".submenu").show();
});
$(".menu").mouseout(function ()
{
$(this).find(".submenu").hide();
});
});
Toggling toggles between show and hide, so the first time the mouseenter event is triggered it will show and the second time it hides. You need to add a conditional statement to make sure it doesn't hide it if the mouse is over it. Better way to do it is to use mouseenter to show and mouseout to hide.
Not a perfect example by any means, but this pure css version should provide a good base to get you started?
http://jsfiddle.net/bNpnZ/2/
<ul class="menu">
<li> Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li> Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
ul {
margin:0;
list-style:none;
}
.menu {
width:100%;
float:left;
background:#eee;
}
.menu > li {
float:left;
margin:0 0 0 10px;
position:relative;
}
.menu > li:first-child {
margin:0;
}
.menu > li > a {
padding:10px 20px;
float:left;
color:#666;
}
.submenu {
position:absolute;
top:-9999em;
left:0;
font-size:14px;
background-color:#ccc;
}
.menu > li:hover .submenu {
top:30px;
}
I have update the jquery and added style for .menu a, also <p> in not required in side the li.
jQuery
$('.menu').hover(
function () {
$(this).children('.submenu').fadeIn('fast');
},
function () {
$(this).children('.submenu').fadeOut();
});
css
.menu a{
display:block;
line-height:50px;
}
.submenu {
font-size:14px;
display:none;
position:absolute;
top:50px;
right:25%;
z-index:300
}
html
<ul id="menüü">
<li class="menu">
Meist
<ul class="submenu">
<li class="asi1">Asi 1</li>
<li class="asi2">Asi 2</li>
<li class="asi3">Asi 3</li>
</ul>
</li>
<li class="menu">
Seadmed
<ul class="submenu">
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</li>
</ul>
jsFiddle File

How to reverse the direction of a suckerfish menu (drop-up)

I have a navigation bar at the bottom of my page rather than at the top. I am trying to implement a "drop-up" suckerfish menu. I want to do it with as little javascript as possible. My current code is as follows and works fine as a drop-down menu. Is there a way to reverse it?
Here is my code:
<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
background: #000000;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li: hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>What We Believe</li>
<li>Our Pastors</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Victory Kids (VC3)</li>
<li>Victory Youth</li>
<li>Connect Groups</li>
<li>S.O.A.P</li>
<li>Victory Group</li>
</ul>
</li>
<li>Connect
<ul>
<li>Contact Us</li>
<li>Social Networks</li>
<li>Blogs</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermon Podcasts</li>
<li>Videos</li>
<li>Images</li>
</ul>
</li>
<li>Giving
<ul>
<li>Help Support</li>
<li>Ministries We Support</li>
<li>2011 Financial Report</li>
</ul>
</li>
<li>Resources</li>
</ul>
All help is appreciated. Thanks!
<style type="text/css">
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
bottom:0px;
position:absolute;
}
#nav a {
display: block;
width: 10em;
}
#nav li {
float: left;
width: 10em;
background: #000000;
}
#nav li ul {
position: absolute;
left: -999em;
bottom:20px;
}
#nav li: hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<ul id="nav">
<li>Home</li>
<li>About Us
<ul>
<li>Who We Are</li>
<li>What We Believe</li>
<li>Our Pastors</li>
</ul>
</li>
<li>Ministries
<ul>
<li>Victory Kids (VC3)</li>
<li>Victory Youth</li>
<li>Connect Groups</li>
<li>S.O.A.P</li>
<li>Victory Group</li>
</ul>
</li>
<li>Connect
<ul>
<li>Contact Us</li>
<li>Social Networks</li>
<li>Blogs</li>
</ul>
</li>
<li>Media
<ul>
<li>Sermon Podcasts</li>
<li>Videos</li>
<li>Images</li>
</ul>
</li>
<li>Giving
<ul>
<li>Help Support</li>
<li>Ministries We Support</li>
<li>2011 Financial Report</li>
</ul>
</li>
<li>Resources</li>
</ul>
Try this without additional JS

Categories