Dropdown animation icon - javascript

Assuming I have a dropdown menu just like this one:
http://jsfiddle.net/1fb9nqb1/
$('#toggle').click(function () {
$('#dropdown').slideToggle();
$('#opt-slide').toggleClass('open');
});
$('#dropdown > li').click(function () {
$('#dropdown').slideUp();
$('#opt-slide').removeClass('open');
});
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
header {
height:200px;
background:#39F;
z-index:4;
}
#opt-slide {
width:300px;
}
#toggle {
background:#099;
display:block;
height:50px;
color:#FFF;
line-height:50px;
z-index:4;
}
#dropdown {
background:#0C9;
list-style:none;
margin-top:0px;
z-index:2;
display:none;
}
#dropdown li {
height:40px;
line-height:40px;
}
#dropdown li:hover {
background:#FAFAFA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS</span>
<ul id="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>
how can I add animation just like this one:
https://dribbble.com/shots/1621359-Open-Close-Icon-Animation
to support the expand / collapse of the menu?
another thing, is there any way to do the dropdown menu without jQuery?
Thanks

If you check this JS Fiddle, you'll see that I've added two spans #s1 and #s2, with a container div#sign, the span is rotated 45deg but opposite to each others, when the menu is hidden the two spans are position in a way representing an arrow shape, if you click on the toggle span, .class1 and .class2 are added to to #s1 and #s2 respectively, these classes has different margin-left values making the two spans forming the X-shape with transitio, where original margin-left valeus set in each span css with transition to make them moving in and out smoothly instead of just jumping all in css, you could however animate these spans with jquery .animate() setting same values with easing too but since it could be done with css I'd go with it:
Edit-1: Code changed upon a comment, changed div#sign to span#sign and made it a child of span#toggle JS Fiddle 2
Updated Code:
$('#toggle').click(function() {
$('#dropdown').slideToggle();
$('#opt-slide').toggleClass('open');
$('#sign #s1').toggleClass('close1');
$('#sign #s2').toggleClass('close2');
});
$('#dropdown > li').click(function() {
$('#dropdown').slideUp();
$('#opt-slide').removeClass('open');
});
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
header {
height:200px;
background:#39F;
z-index:4;
}
#opt-slide {
width:300px;
position:relative;
}
#toggle {
background:#099;
display:block;
height:50px;
color:#FFF;
line-height:50px;
z-index:4;
position:relative;
}
#dropdown {
background:#0C9;
list-style:none;
margin-top:0px;
z-index:2;
display:none;
}
#dropdown li {
height:40px;
line-height:40px;
}
#dropdown li:hover {
background:#FAFAFA;
}
#sign{
width:50px;
height:25px;
display:inline-block;
position:absolute;
top:25px;
right:10px;
}
#sign .s{
width:25px;
height:4px;
display:inline-block;
border-radius:2px;
background-color:white;
position:absolute;
}
#sign #s1{
transform:rotate(45deg);
z-index:100;
margin-left:0;
transition:all 0.5s ease-out;
}
#sign #s2{
transform:rotate(-45deg);
z-index:200;
margin-left:16px;
transition:all 0.5s ease-in;
}
#sign #s2.close2{
margin-left:7px;
transition:all 0.5s ease-out;
}
#sign #s1.close1{
margin-left:7px;
transition:all 0.5s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS<span id="sign"><span id="s1" class="s"></span><span id="s2" class="s"></span></span>
</span>
<ul id="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</div>

Related

How to replace hover for mobile device

I tried to use :active for the mobile device but it doesn't seem to work. Can I do this with css or do I need to create mouseover listeners in javascript?
#major{
display:flex;
justify-content:space-around;
list-style-type:none;
}
#minor1,#minor2{
display:none;
}
#about:hover, #take:hover{
background-color:#538231;
color:white;
}
#take:hover #minor2, #take:active #minor2 {
display:flex;
position:absolute;
justify-content:start;
left:0 ;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#about:hover #minor1, #about:active #minor1{
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#navbar{
position:relative;
font-size:3.5vw;
color:#538231;
background-color:#b3d7f7;
}
li{
margin:0!important;
}
#minor1 li{
margin-left:3vw!important;
}
#minor2 li{
margin-left:1vw!important;
margin-right:5vw!important;
}
<div id="navbar">
<ul id="major">
<li>HOME</li>
<li id="about">ABOUT US
<ul id="minor1">
<li>OUR STORY</li>
<li>OUR WORK</li>
<li>SWAG LEADERS</li>
<li>IN THE NEWS</li>
</ul>
</li>
<li>CALENDAR</li>
<li id="take">TAKE ACTION
<ul id="minor2">
<li>GET INVOLVED</li>
<li>DONATE</li>
</ul>
</li>
<li>RESOURCES</li>
</ul>
</div>
If I have to go on only pure HTML and CSS, I have two options for this.
First is to put an attribute tabindex="0" on li tag then add :focus selector on the css. But the problem with this is that you have to click somewhere else to display none the sub-menus.
Second is to have a checkbox to accommodate the click/unclick event. I just set an example for mobile view, #media query of max-width: 800px. So please resize the browser when you check this.
Please check my code below:
#major{
display:flex;
justify-content:space-around;
list-style-type:none;
}
#minor1,#minor2{
display:none;
}
#about:hover, #take:hover{
background-color:#538231;
color:white;
}
#take:hover #minor2, #take:active #minor2 {
display:flex;
position:absolute;
justify-content:start;
left:0 ;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#about:hover #minor1, #about:active #minor1{
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#navbar{
position:relative;
font-size:3.5vw;
color:#538231;
background-color:#b3d7f7;
}
li{
margin:0!important;
}
#minor1 li{
margin-left:3vw!important;
}
#minor2 li{
margin-left:1vw!important;
margin-right:5vw!important;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
#media only screen and (max-width: 800px) {
#about input[type="checkbox"]:checked ~ label, #take input[type="checkbox"]:checked ~ label {
background-color:#538231;
color:white;
}
#about input[type="checkbox"]:checked ~ ul, #take input[type="checkbox"]:checked ~ ul {
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
}
<div id="navbar">
<ul id="major">
<li>HOME</li>
<li id="about">
<input type="checkbox" id="check">
<label for="check">ABOUT US</label>
<ul id="minor1">
<li>OUR STORY</li>
<li>OUR WORK</li>
<li>SWAG LEADERS</li>
<li>IN THE NEWS</li>
</ul>
</li>
<li>CALENDAR</li>
<li id="take">
<input type="checkbox" id="check2">
<label for="check2">TAKE ACTION</label>
<ul id="minor2">
<li>GET INVOLVED</li>
<li>DONATE</li>
</ul>
</li>
<li>RESOURCES</li>
</ul>
</div>

jquery use .stopPropagation() on hover menu

How to use event .stopPropagation() (or something else) in the following situation.
I have a standard menu with submenu. In the submenu background, I have background image which I need to overlay adding pseuso-element (background:green) on the parent. Because with jquery I cant control css pseudo-elements (I need control opacity), I add another class to my parent.
Everything works as I need, but adding / removing the class on parent makes the image background blink.
jsfiddle
my site live (top menu is my problem)
HTML:
<ul class="top-menu">
<li>
link 1
<div class="submenu">
<ul>
<li>sublink 1</li>
<li>sublink 2</li>
<li>sublink 3</li>
<li>sublink 4</li>
<li>sublink 5</li>
</ul>
</div>
</li>
<li>link 2</li>
<li>link 3</li>
</ul>
jquery
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
var cover = $(".submenu");
cover.data('timer', setTimeout(function(){
cover.removeClass("myclass");
}, 2000)
);
e.stopPropagation();
});
css
*{
box-sizing:border-box;
}
ul.top-menu {
display:flex;
list-style:none;
text-transform:uppercase;
width:100%;
justify-content:center;
background:white;
position:relative;
}
ul.top-menu li a {
color:black;
padding:10px;
text-decoration:none;
display:block;
}
.submenu {
position:absolute;
background:red url("http://www.metalclays.com/content/images/thumbs/0002871_texture-tile-fireworks_100.jpeg");
background-position:right top;
background-size:200px auto;
background-repeat:no-repeat;
width:100%;
top:100%;
left:0;
z-index:0;
}
.submenu:after {
content:"";
background:green;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
z-index:-1;
}
.submenu.myclass:after {
opacity:1;
}
.submenu ul {
list-style:none;
}
.submenu a {
color:white;
display:block;
}
have you tried this?
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
}).mouseout(function(e){
e.preventDefault();
$(".submenu").removeClass("myclass");
});
but adding / removing the class on parent makes the image background blink
This happens because on mouseover you add and add the class. Change from:
$(".submenu a").mouseover(function(e){
$(".submenu").addClass("myclass");
})
to:
$(".submenu a").mouseover(function(e){
if ($(".submenu.myclass").length == 0) {
$(".submenu").addClass("myclass");
}
})
The updated fiddle.

Adding logo next to Toggle Icon on navbar

I am fresh to HTML & CSS. I have started customizing a Bootstrap template and would like to add a logo next to the icon bar, but this navbar seems way more trickier than the basic Bootstrap navbar that I've played around with. I would really appreciate it if someone could help me out by pointing me where to look in the code, or by providing one or two examples. Here is the link to the template I am customizing. I would like to place an image right next to the toggle button like this one does with "Menu".
HTML:
<nav id="navigation" class="navbar scrollspy">
<!-- .container -->
<div class="container">
<div class="navbar-brand">
<img src="images/logo.png" alt="Logo" /> <!-- site logo -->
</div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Portfolios</li>
<li>Why Us?</li>
<li>Page</li>
<li class="menu-btn">Contact</li>
</ul>
</div>
<!-- .container end -->
</nav>
CSS:
/* Navigation Mobile */
#navigation_mobile {
display:none;
font-size:14px;
line-height:18px;
text-align:center;
font-weight:600;
text-transform:uppercase;
}
#navigation_mobile .nav-menu-links {
display:none;
background-color:#2a2a2a;
}
#navigation_mobile ul {
padding:30px 100px;
margin:0px;
}
#navigation_mobile ul li {
list-style-type:none;
padding:11px 0px;
}
#navigation_mobile ul li a {
display:block;
color:#a9a9a9;
}
#navigation_mobile ul li a:hover { color:#FFF; }
#navigation_mobile .nav-menu-button {
background-color:#202020;
padding:15px 0px 14px;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle {
color:#a9a9a9 !important;
font-size:24px;
line-height:1;
background:none;
padding:0px;
border:0px;
border-radius:0px;
-webkit-transition:color .2s ease;
transition:color .2s ease;
}
#navigation_mobile .nav-menu-button button.nav-menu-toggle:hover { color:#FFF !important; }
#header .navbar { display:none;}
#navigation_mobile { display:block; }
You could simply add the text to the image. And define the text in the image by:
<img src="logo.png" alt="My Logo">

CSS - Need help figuring out where I went wrong with my dropdown menu nav

Hi I posted two days ago and got some feedback but am still having issue getting my drop down nav working. Any feedback on how I can get my drop down nav working or if there is a cleaner, simpler way to execute this?
Here is my code as it stands now with the fixes from the previous post implemented.
JSfiddle as well.
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="template_ss.css"/>
<title></title>
</div>
</head>
<body>
<!--------------------------header--------------------------->
<div id="headerDiv">
<div id="titleDiv">
<p id= "titleText"><span>Ti</span>t<span>le</span></p>
</div>
<div class="navDiv">
<ul class="navUL">
<li>Home</li>
<li>
Top
<ul class="dropdown">
<li>Menu</li>
<li>Plus</li>
<li>Constant</li>
</ul>
</li>
<li>
Browse
<ul class="dropdown">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
Random
<ul class="dropdown">
<li>blank</li>
<li>none</li>
<li>all</li>
</ul>
</li>
<li>
Profile
<ul class="dropdown">
<li>My profile</li>
<li>Edit profile</li>
</ul>
</li>
<li>
How it works
</li>
</ul>
</div>
<div class="searchDiv">
<form>
<input type="text" placeholder="blah..." required>
<input type="button" value="Search">
</form>
</div>
<!---------------------------body--------------------------->
<div class="bodyDiv">
</div>
</body>
</html>
CSS:
/*-------------------header----------------------*/
body{
margin:0px;
}
#headerDiv{
position: fixed;
height:12%;
width:100%;
background-image:url("header.png");
background-repeat:repeat-x;
text-align: center;
}
#titleDiv{
width: auto;
margin: auto 0;
}
#titleText{
color:white;
font-size:130%;
text-allign:center;
font-family:verdana,san serif;
}
span:first-child{
color:red;
}
span{
color:blue;
}
.navDiv{
display:inline-block;
z-index:10;
}
.navUL{
position:relative;
display:inline-block;
list-style-type:none;
margin: auto 0;
padding:0;
border-top:1 solid;
border-right:1 solid;
border-left:1 solid;
width:100%;
}
.navUL:after{
content:"";
display:table;
}
.navUL li{
padding: .2em 2em;
margin:2em,2em,2em,2em;
color: #fff;
background-color: #036;
display:inline-block;
text-align:center;
position:relative;
}
.navUL li:hover{
background-color:#07427c;
}
.navUL li a{
color:#fff;
}
.navUL li p{
margin:0;
}
.dropdown{
position:absolute;
display:none;
background-color:#036;
padding:0
left:0;
}
.navUL ul li:hover > ul{
display:inline;
}
.navUL>ul>li:after{
content:"\25BC";
font-size:.5em;
display:inline;
position:relative;
}
.searchDiv{
display:inline-block;
}
/*------------------body--------------------*/
.bodyDiv{
text-align:center;
float:left;
background-color:grey;
height:80%;
width:70%;
position:relative;
top:80%;
left:50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
I can't be sure exactly what you're looking for, since neither of your two posts specified what your question was, but from looking at your jsfiddle, I saw two noticeable fixes that were needed. First, your html body was floating up into your nav. You need to clear those floats. Secondly, your css for displaying the dropdown was invalid. You were setting a rule on .navUL ul li:hover > ul. Since .navUL is the class of the unordered list, it has no child ul. The proper path would be ul.navUL li:hover ul.
Here is an update of your jsfiddle

Slide toggle in list items, but should not toggle when click on the child item

What I'm trying to do is ..
when I click the first list item it should display what are the options for that list item
then if the user click any of that options, the slide toggle must not be toggled
that's my problem :<. the toggle enables when i click the item inside the list item
Any kind of help would be great, thanks :D
This is my HTML File
<div class='div_content_wrapper'>
<script src="../../script/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
$(".li_submenu_notactive").hide();
$(".li_menu_notactive").click(function(){
$(".li_submenu_notactive", this).slideToggle(120);
});
});
</script>
<div class='div_navigation'>
<ul class='ul_navigation_menu'>
<li class='li_menu_notactive'><label>Home</label>
<ul>
<li class='li_submenu_notactive'><label>Notifications and Schedules for Today</label></li>
</ul>
</li>
<li class='li_menu_active'><label>Crew Management</label>
<ul>
<li class='li_submenu_active'><label>Add Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Account</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>User Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Account</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Service Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Services / Types</label></li>
<li class='li_submenu_notactive'><label>View / Update Services</label></li>
<li class='li_submenu_notactive'><label>View / Update Types</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Schedule Management</label>
<ul>
<li class='li_submenu_notactive'><label>View / Update Schedules</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Content Management</label>
<ul>
<li class='li_submenu_notactive'><label>Page Wallpapers</label></li>
<li class='li_submenu_notactive'><label>Page Infos</label></li>
<li class='li_submenu_notactive'><label>Employee O.T.M</label></li>
<li class='li_submenu_notactive'><label>Company Logo</label></li>
<li class='li_submenu_notactive'><label>Terms of Services and Conditions</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Bank Management</label>
<ul>
<li class='li_submenu_notactive'><label>Add Option/Account</label></li>
<li class='li_submenu_notactive'><label>View / Update Option/s</label></li>
<li class='li_submenu_notactive'><label>View / Update Account/s</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Report Management</label>
<ul>
<li class='li_submenu_notactive'><label>Accounts</label></li>
<li class='li_submenu_notactive'><label>Services</label></li>
<li class='li_submenu_notactive'><label>Schedules</label></li>
</ul>
</li>
<li class='li_menu_notactive'><label>Store Configurations</label>
<ul>
<li class='li_submenu_notactive'><label>Manage Store Option/s</label></li>
</ul>
</li>
</ul>
</div>
This is my CSS File
body{
display:inline !important;
font-family:segoe ui;
background-color:#111111;
}
/*divs*/
#div_body_wrapper{
position:absolute;
top:0px;
padding:10px;
}
.div_clear{
clear:both;
}
.div_banner{
float:left;
width:1320px;
min-height:30px;
background-color:black;
color:white;
}
.div_body{
float:left;
width:1125px;
min-height:640px;
background-color:#313131;
margin-left:5px;
}
.div_footer{
float:left;
width:1320px;
height:30px;
background-color:black;
color:white;
padding:5px;
}
.div_navigation{
float:left;
width:180px;
min-height:30px;
background-color:#202020;
}
.div_banner, .div_body, .div_navigation{
padding:5px;
margin-bottom:5px;
}
.div_content_wrapper{
display: block;
overflow:auto;
}
/*divs*/
/*div banner*/
.btn_banner{
float:right;
margin-top:30px;
border:0px;
padding:5px;
background-color:#ffb804;
border-radius:3px;
font-size:18px;
margin-left:5px;
margin-right:5px;
}
.btn_banner:hover{
background-color:#636363;
color:white;
cursor:pointer;
}
/*div banner*/
/*div banner*/
#lbl_banner{
color:white;
font-size:50px;
font-family:Century Gothic;
font-weight:bold;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000;
}
/*div banner*/
/*div navigation*/
.ul_navigation_menu{
list-style:none;
padding:0;
}
.ul_navigation_menu li{
list-style:none;
margin-top:5px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
font-weight:bold;
color:white;
border-style:solid;
border-color: #3e3e3e;
border-width:0px;
border-bottom-width:3px;
}
.ul_navigation_menu li label{
background-color:#ffb804;
border-radius:3px;
color:black;
padding:5px;
}
.ul_navigation_menu li label{
cursor:pointer;
}
.ul_navigation_menu li label{
display:block;
}
.ul_navigation_menu li ul{
list-style:none;
padding:0;
}
.ul_navigation_menu li ul li{
display:block;
list-style:none;
background-color:#111111;
margin-top:5px;
margin-left:10px;
padding-left:5px;
padding-right:5px;
color:white;
font-weight:normal !important;
border-radius:3px;
}
.ul_navigation_menu li ul li label{
background-color:#111111;
color:white;
}
.ul_navigation_menu li ul li:hover > label{
background-color:#4a4a4a;
cursor:pointer;
}
.li_menu_active ul li {
display:block !important;
}
.li_submenu_active label{
background-color:#EB8921 !important;
}
/*div navigation*/
Attach the click event to thelabel to be more explicit and avoid the propagation jsFiddle
$(document).ready(function(){
$(".li_submenu_notactive").hide();
$(".li_menu_notactive label").click(function(){
$(this).next('ul').find(".li_submenu_notactive").slideToggle(120);
});
});
Use next() to transverse to the following ul and slideToggle() the child notactive li
Easiest solution I could think of:
Add the toggle listener to label instead of li
HTML li:
<li class='li_menu_notactive'><label class="li_menu_label">Home</label>
<ul>
<li class='li_submenu_notactive' style="display: none;"><label>Notifications and Schedules for Today</label></li>
</ul>
</li>
JQuery:
$(document).ready(function(){
// we have this done in HTML by adding the following to .li_submenu_notactive :
// style="display: none;"
// $(".li_submenu_notactive").hide();
$(".li_menu_label").click(function(){
// let's find a .li_submenu_notactive element under the same parent as the triggering label
$(this).siblings(".li_submenu_notactive").slideToggle(120);
});
});

Categories