Expand/collapse a menu list animated and only with CSS - javascript

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>

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>

Dropdown menu with arrow

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

jQuery using tab to go through dropdown menu links (keyboard accessibility)

I have a css menu I would like to make accessible through keyboard interaction. I want to be able to tab through each link including sub menu links.
If the dropdown focus moves on to the next parent link dropdown then the previous dropdown should hide.
Updated Fiddle
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 1</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
</ul>
JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
I am not sure what is your desired outcome and need for this result, but hopefully this will help you out.
I had to redo your example due to naming convention and approach, but I assume this is what you wanted...
Here's a demo, just in case...
JSFiddle
HTML
<ul class="navbar">
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
</ul>
CSS
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
jQuery
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
here you go, simple jquery :)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
This basically displays/hide each the dropdown when the mouse is over/leaves the parent div.
I don't think it would be a good idea to display the dropbown menu on focus, cause i believe you can only focus on certain elements like inputs.
Hope this helps!

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

jQuery submenu won't show up

Using the following code I could get the ABOUT and FAQ submenus to show up but nothing would appear on mouse hover and I have no idea why. Please help! If there is more code I should show just let me know! Thanks in advance for any help :)
The HTML:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations</li>
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities</li>
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
<li>Reservations</li>
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</ul>
The CSS:
.navigation {margin:0; padding:0;list-style:none; }
.navigation li {
float:left;
width:120px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #F2861D;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#F2861D;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:3px solid #F2861D;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
overflow: visible;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px dashed #6B6B6B;
}
.navigation ul a:hover {
color:#F2861D;
}`
The Javascript:
$(document).ready(function() {
// Navigation function
$('.navigation li').hover(function () {
$('ul', this).fadeIn();
},
function () {$('ul', this).fadeOut();}
);
jsFiddle
The li elements for Accommodations, Activities and Reservations didn't correctly nest the submenu's ul elements. Check out the code in this JS Fiddle for a corrected version:
http://jsfiddle.net/9NdZC/
Here is just the HTML part:
<ul class="navigation">
<li>Home</li>
<li>About
<ul>
<li>History</li>
<li>Location</li>
<li>Gallery Tour</li>
<li>Testimonials</li>
</ul>
</li>
<li>Accomodations
<ul>
<li>Event Space</li>
<li>Guest Rooms</li>
<li>Kitchen and Catering Facility</li>
</ul>
</li>
<li>Activities
<ul>
<li>The Katy Trail</li>
<li>Augusta</li>
<li>St. Louis Attractions</li>
</ul>
</li>
<li>Reservations
<ul>
<li>Rates</li>
<li>Contact</li>
<li>Request Info</li>
<li>Event Agreement Form</li>
</ul>
</li>
<li>FAQ
<ul>
<li>Additional Info</li>
<li>Catering</li>
</ul>
</li>
</ul>

Categories