I am currently trying to create a navbar with a dropdown item in my App.vue file. I read that you can do it without JQuery, so I was hoping someone could assist me with that. I'm getting a bit lost once I get to the point of creating javascript for it.
This is for a front end only website.
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<nav>
<div class="nav-wrapper">
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<!-- Dropdown Trigger -->
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">
Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
Expected result: Navbar with functional dropdown item.
Actual result: Dropdown is currently disabled because I have not implemented any JQuery or JavaScript
I think your HTML could firstly do with a little work. Something like this would be more semantically correct:
<nav>
Logo
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li class="dropdown-button">
Dropdown
<i class="material-icons right">arrow_drop_down</i>
<ul class="dropdown-content hide">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
</li>
</ul>
</nav>
Note the hide CSS class on the dropdown-content ul.
.hide {
display: none;
}
Then using your your JS:
const trigger = document.querySelector('.dropdown-button');
const content = document.querySelector('.dropdown-content');
trigger.addEventListener('click', () => {
if (content.classList.contains('hide')) {
content.classList.remove('hide'); // Show the content
} else {
content.classList.add('hide'); // Hide the content
}
});
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>
On my mobile part of the site I want to show the submenu without having to click/hover the parent.
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown "><a class="dropdown-toggle" href="/">Home</a>
<ul class="dropdown-menu" >
<li>News</li>
<li>Contact
<li>About us</li>
</ul>
<li>
</ul>
</div>
I want to show the submenu without having to click or hover the parent. Codes I'm using is CSS, Javascript and Jquery so I can use one (or all) of them to make this. Using the latest version of Bootstrap to make the site (3.3.6).
EDIT
The JSFiddle: https://jsfiddle.net/uvd5jp0o/
Here you can also see I've made the submenu display on hover in jquery.
You can add the class visible-xs- to make the nav displayed in mobile browsers
Checkout the bootstrap website
http://getbootstrap.com/css/
So, for extra small (xs) screens for example, the available
.visible-- classes are: .visible-xs-block, .visible-xs-inline, and
.visible-xs-inline-block.
Try This:
DEMO
Use some piece of script :)
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul id="Drp" class="dropdown-menu visible-xs">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
SCRIPT:
$(document).ready(function(){
CheckScreenSize();
});
window.onresize = function(event) {
CheckScreenSize();
};
function CheckScreenSize(){
if($(window).width()<768){
$("#Drp").addClass('visible-xs');
}else
{
$("#Drp").removeClass('visible-xs');
}
}
Or you can set a width when you whant the menu to show, like this:
window.onload = checkWindowSize;
window.onresize = checkWindowSize;
function checkWindowSize() {
if ($(window).width() < "768") { //example width of 768px
$("#bs-example-navbar-collapse-1 li").addClass('open');
}else{
$("#bs-example-navbar-collapse-1 li").removeClass('open');
}
}
Or you can use the built in class in bootstrap and add it to your ul-element like this:
<ul class="dropdown-menu visible-xs">
The codes will check the window width and only react when the width is smaller then 768px
I need a little assistance in modifying the javascript that controlls bootstrap dropdowns.
What i need to happen is when you click on a dropdown, it shows. On the top level that works fine, but if i want to go into a dropdown within a drop down
Example:
<ul>
<li>Dropdown 1
<ul>
<li>Dropdown 2
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
</li>
</ul>
When i click on dropdown 1, I can see the list item called dropdown 2 but when i click on it, it closes the whole list item again. When you click on dropdown 2 i need it to show up.
I found a hover method to open the second nested dropdown but i need it to show on click.
And help is much appreciated. Here is a fiddle: http://jsfiddle.net/raDUC/1/
try this:
HTML:
<div class="navbar navbar-fixed-top span2">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"></a> <a class="brand" href="#">Project Name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="dropdown">
Dropdown 1
<ul class="dropdown-menu">
<li class="dropdown dropdown-nested"> Dropdown 2
<ul class="dropdown-menu">
<li>Living and Nonliving things</li>
</ul>
</li>
<li> Another action
</li>
</ul>
</li>
<li> Link
</li>
<li> Link
</li>
<li> Link
</li>
<li class="dropdown"> Dropdown
<ul class="dropdown-menu">
<li> Action
</li>
<li> Another action
</li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
JS:
$(function(){
$('.dropdown-nested').click(function(event){
event.stopPropagation();
var dropdown = $(this).children('.dropdown-menu');
dropdown.toggle();
});
});
Side Note...
I recommend adding the following css to your nav menus in bootstrap:
ul.nav a {
outline: none;
}
it keeps that ugly blue outline from showing up if you click on a main menu item to close it.
What I have are multiple links in my nav bar but am having changing the ul class.
There are just two of my buttons on this page I need to change the ul class form select to current and the current to select.
<div class="nav">
<ul class=" current">
<li>
Home
<div class="select_sub">
<ul class="sub">
<li></li>
</ul>
</div>
</li>
</ul>
<ul class=" select">
<li>
About
<div class="select_sub">
<ul class="sub">
<li>About Us</li>
<li>What are we</li>
</ul>
</div>
</li>
</ul>
</div>
$(document).ready(function() {
$('.select').click(function () {
$('.current').removeClass('current').addClass('select');
});
});
You have lot of syntax errors .There is no need of using quotes for this and you missed ; at the end
replace
$('this').removeClass('select')
with
$(this).removeClass('select');
or use
$(this).removeClass('select'.)addClass("current");
$(document).ready(function() {
$('.current').click(function(){
$(this).removeClass('select'.)addClass("current");
});
});
I'm trying to create an "expandable" menu. So, if a user clicks on option A two suboptions should show up. I'm trying to do something like this but in a menu...
This is my code so far...
<li>
<i class="icon-picture icon-white"></i> Galleries
<div class="nav-collapse88">
<ul>
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</div>
</li>
So when I click on galleries the options Add and Delete should appear. Any suggestions?
I would nest ul's like so:
<ul>
<li>
<a class="expand">Link used to expand</a>
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
The I would use this jquery:
$(document).on('click', 'a.expand', function(e) {
e.preventDefault();
$(this).siblings('ul').slideToggle();
});
You would need to set the sub menu CSS to display none.
Something along these lines should do the trick.
This works:
<ul>
<li class="dropdown">
Support
<ul class="dropdown-menu" role="menu">
<li><i class="icon-play"></i> Add</li>
<li><i class="icon-play"></i> Delete</li>
</ul>
</li>
</ul>
I believe you want the class to be dropdown not collapse. That's how the bootstrap documentation recommends it for menus.
Change the class to be dropdown, remove the inner div, and add the class dropdown-menu the inner ul.
<li class="dropdown">
<i class="icon-picture icon-white"></i>>Galleries
<ul class="dropdown-menu">
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</li>
tyy this http://jsfiddle.net/68RXP/213/
$(function(){
$(".nav-collapse88").hide();
$("a").click(function(e){
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
<li>
<a href="?op=1">
<i class="icon-picture icon-white"></i> Galleries</a>
<div class="nav-collapse88">
<ul>
<li>
<i class="icon-play"></i> Add
</li>
<li>
<i class="icon-play"></i> Delete
</li>
</ul>
</div>
</li>