I am having a menu, but my icon doesn't want to go next to menu item.
I worked while i had this code
<li class="dropdown">
<a class="dropdown-toggle" data-over="dropdown" href="partners.php">Partners</a>
<span class="caret"></span>
</a>
</li>
I change it, cause I want a separate link when user clicks on link-menu-item and want to make my caret to work with drop-down, So ichange my to :
<li class="dropdown">
Partners
<a class="dropdown-toggle" data-hover="dropdown">
<span class="caret"></span>
</a>
</li>
I moved my dropdown-toogle with an <a> tag to the <span class='caret'> and now I have two <a> tags inside the <li> but the caret not coming next to text for no reason..
Any thoughts?
Here's a sample of my code
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
$('.dropdown-menu li a').click(function(){
$(this).parents('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse btnCollapse"><div class="collapse navbar-collapse btnCollapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Partners<a class="dropdown-toggle" data-hover="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<div class="container">
<div class="row">
<ul class="col-sm-4">
<li>Club</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><i class="fa fa-sign-in" aria-hidden="true"></i> Sign in</li> </ul>
</div></div>
Hers a fiddle as well: https://fiddle.jshell.net/xjpt2p44/
Cause snippet display only in full mode
Add this css
.nav .dropdown > a {
display: inline-block;
}
Related
This is the structure of my menu. I have attached the jQuery code below. The way this works is that when I click on Home Page, its parent element which is the list item has a class that is set to active.
At the moment, When I am at the Home Page, its list item has an active class. However, the list-items for Account Codes and Branches also have an active class set on it. How can I make sure that only my Home Page is affected?
Also, how can I change my jQuery code to work with this menu format where there is a new list within a list?
<ul class="sidebar-menu" id="navigation-menu">
<li><i class="far fa-square"></i><span>Home Page</span></li>
<li class="menu-header">Administrator Mode</li>
<li class="nav-item dropdown">
<i class="fas fa-fire"></i><span>Configuration</span>
<ul class="dropdown-menu">
<li>Account Codes</li>
<li>Branches</li>
</ul>
</li>
</ul>
<script>
$(document).ready(function () {
var current = location.pathname;
$("#navigation-menu a").each(function () {
var $this = $(this);
if ($this.attr('href').indexOf(current) !== -1) {
console.log($this);
$this.parent().addClass('active');
console.log("matched");
}
});
});
</script>
Dropdown Layout
The most effective HTML layout pattern for dropdown menus is to alternate between <ul>/<ol> and <li>:
<ul>
<li class='dropdown'>
Dropdown
<ul class='menu' style='display:none'>
<li>Item</li>
<li class='dropdown'>
<a href='#/'>Dropdown</a>
<ul class='menu' style='display:none'>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
Also, if you want the menus to be initially closed, add the following inline style:
<ul class='menu' style='display:none'>
The <a>nchors have default behavior that is hard to override when using a framework like Bootstrap or Foundation. Try toggling the .active class on .has-dropdown children tags.
Demo
Details commented in demo
/*
Delegate click event to each .has-dropdown
Toggle .active class on that particular .has-dropdown children tags
Get next .dropdown-menu and toggle it up/down and toggle .active
*/
$('.has-dropdown').on('click', function(e) {
$(this).children().toggleClass('active');
$(this).next('.dropdown-menu').slideToggle().toggleClass('active');
});
.active {
color: tomato
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css' rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
<ul id="navigation-menu" class="sidebar-menu">
<li>
<a href="#/" class="nav-link">
<i class="fas fa-home"></i><span> Home Page</span>
</a>
</li>
<li class="menu-header">
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-tools"></i><span> Administration</span>
</a>
<ul class="nav-item dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-lock"></i><span> Security</span>
</a>
<ul class="dropdown-menu" style='display:none'>
<li>
<a href="#/" class="nav-link">
<span> Account Codes</span>
</a>
</li>
<li>
<a href="#/" class="nav-link">
<span> Branches</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#/" class="nav-link has-dropdown">
<i class="fas fa-cog"></i><span> Configuration
</span></a>
<ul class="dropdown-menu" style='display:none'>
<li>
<span> Layout</span>
</li>
<li>
<span> Assets</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I knew javaScript but I'm not used to it as I'm more focus on creating UI design. So decided to take up some short courses and then I've encountered this problem. There should be dropdown which consist of 4 items to choose: red, blue, green, yellow. If a user choose a color let's say yellow, the div box underneath will become yellow. I used Bootstrap for this by the way.
My code goes something like this ` Dropdown 1
<ul class="dropdown-menu">
<li id="red">Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
`
Full code resides here
http://jsfiddle.net/0c4dbr9t/7/
Try this simple code
Demo
Code:
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li data-color="red">Red
</li>
<li data-color="blue">Blue
</li>
<li data-color="green">Green
</li>
<li data-color="yellow">Yellow
</li>
</ul>
</div>
<div id ="box"><div>
$( document ).ready(function() {
$('.dropdown-menu li').click(function(){
var color = $(this).data("color");
$("#box").css('background-color',color);
});
});
Please let me know if this is what you needed..
html
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul id="dd" class="dropdown-menu">
<li>Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
</div>
<div id ="box"><div>
css
#box {
margin-top: 20px;
background-color: #000;
padding: 50px;
}
js
var ul = document.getElementById('dd');
ul.addEventListener("click", changeColor, false);
function changeColor (e) {
if(e.target.nodeName == "A") {
document.getElementById("box").style.background =e.target.innerHTML;
}
}
Using simple javascript:
<div class="btn-group"> <a class="btn " href="#">Dropdown 1</a>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="red">Red
</li>
<li>Blue
</li>
<li>Green
</li>
<li>Yellow
</li>
</ul>
</div>
<div id ="box"> Some Text <div>
<script>
var menu = document.querySelector("ul.dropdown-menu");
menu.onclick = function(evt) {
console.log(evt.target.innerText)
document.getElementById("box").style.backgroundColor = evt.target.innerText;
}
</script>
I am trying to active menu and sub menu whichever is active. If a sub menu is active, main of that should also be active.
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li class="active">HOME</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">LEARNING CURVE<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>ABOUT US</li>
<li>CONTENT DEVELOPMENT PROGRAM</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">SKILL UP<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>ONLINE COURSES</li>
<li>SKILL TEST</li>
<li>JOBS</li>
</ul>
</li>
</div>
I put the script in a js file and named it as active.js.
This is the js code:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("navbar ul a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});[![menu menu bare home is active now manually][1]][1]
$(this).addClass("active"); is only for applying sub menu only. You also want to apply sub menu class. user parent element class
I need to make a div as a dropdown and when clicking on it,
the menu slides and shows its items.
I've tried to implement this but when clicking on the div it doesn't show
it's items at all.
I've used this reference:
http://getbootstrap.com/javascript/#dropdowns-examples
Here's the way I've implemented this:
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
.top-bar-margin-top {
margin-top: 43px;
/*padding: 0;*/
}
.top-bar-margin-top a:hover {
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
</div>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</div>
How can it be solved ?
There's 2 things wrong here:
You're mixing both data-* attributes and JavaScript initialization, it should be either one or the other (maybe this isn't a real problem, but it is unnecessary and messy).
You haven't followed the example correctly, the dropdown trigger and contents need to both be contained within the div with class "dropdown".
Change the HTML to:
<div class="col-md-2 col-lg-2 top-bar-margin-top">
<div class="dropdown">
<a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="top-bar-small-title make-it-regular">item</span>
<br />
<span class="top-bar-app-links make-it-regular">Select Item</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
No JS required (just include the bootstrap.js and it should do the rest).
Working fiddle:
https://jsfiddle.net/dpjpcfuy/1/
You can do this easily with data-target attribute
<ul class="no-bullets droppable-menu">
<li>Our Story</li>
<li>Our Menu</li>
</ul>
target is in the div
<div class="dropdown-menu" id="m-target-1">
... content in your div
</div>
<div class="dropdown-menu" id="m-target-2">
... content in your div
</div>
and remove
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
from your JS code. This should work!
My drop down menu nested inside of my main drop down menu won't display all of my information. I played around with it inside JSFiddle and still can't get it to work. If I click the user glyphicon to expand the options, it will get cut off at the bottom of the main menu size.
http://jsfiddle.net/2hGuv/
Here's the HTML
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ns-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="ns-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="hidden-sm">Events</li>
<li class="hidden-sm">Contest</li>
<li>Magazine</li>
<li>Contact</li>
<li class="dropdown">
Follow <b class="caret"></b>
<ul class="dropdown-menu">
<li>
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=zta6bgfab&p=oi&m=1105083662969" target="_blank">
Join Our Mailing List
</a>
</li>
<li class="navbar-follow">
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_twitter_follow" addthis:userid="nextstopmag"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="searles-media-inc." addthis:usertype="company"></a>
<a class="addthis_button_google_follow" addthis:userid="+Nextstopmagazine"></a>
</div>
</li>
</ul>
</li>
<li class="dropdown visible-sm">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Events</li>
<li>Contest</li>
<li>Search</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Dashboard</li>
<li><a class="dropdown-toggle" href="~/account/manage">Manage Account</a></li>
<li>Log off </li>
</ul>
</li>
<li class="hidden-sm"><span class="glyphicon glyphicon-search"></span></li>
</ul>
</div>
</div>
</nav>
Sounds like you have overflow: hidden; on your navbar.
The fiddle seems to be working.