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.
Related
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
}
});
I create submenu and I need to get value of direct parent for Submenu"li"
this is my code
<div class="box">
<div class="col-sm-6">
<!-- main menu-->
<ul>
<li class="m-sub">
Cars
<!-- sub menu for cars-->
<ul class="sub">
<li> Audi</li>
<li> KiA</li>
</ul>
</li>
<li class="m-sub">
Tablets
<!--start sub menu for tablet -->
<ul class="sub">
<li> Phone</li>
<li> Sony</li>
</ul>
</li>
<li> Laptop</li>
<li> Glass </li>
</ul>
</div>
</div>
I need to get direct parent of sony for example, when I use ($(this).parent()).text() the result was phone not tablet.
I need to get value of parent "tablet" ,when select Audi i need to get cars
thanks in advance.
Tablets isn't inside the direct parent of your list item; you'll need a bit more jQuery:
var li = $('.sub > li')
console.log(
li.closest('.m-sub').contents().eq(2).text().trim() //=> 'Tablets'
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="m-sub">
<span><i class="icon-tablet"></i></span> Tablets <span class="leftarr"><i class="icon-chevron-right"></i></span>
<ul class="sub">
<li> Phone
</li>
<li> Sony
</li>
</ul>
</li>
<li> Laptop
</li>
<li> Glass
</li>
</ul>
I tried fix menu for responsive in width :768px.
Javascript for open sub-menu (max-width:768px):
$(document).ready(function(){
$(".slicknav_nav li").click(function(){
$(this).hasClass("active")?$(".slicknav_nav li").removeClass("active"):($(".slicknav_nav li").removeClass("active"),$(this).addClass("active"))
});
});
HTML in Width:768px, before click arrow
<ul class="slicknav_nav" aria-hidden="false" role="menu">
<li class="">
<!-- LOOP MENU 1 , This be change to <li class="active"> when click arrow -->
<a>Computer</a>
<!-- HEAD MENU -->
<div class="sub-menu">
<ul>
<!-- LOOP SUB MENU1 -->
<li class="slicknav_parent slicknav_collapsed">
<a class="slicknav_item slicknav_row" tabindex="0" aria-haspopup="true" role="menuitem" href="#">
<span class="slicknav_arrow">►</span>
<!-- ARROW -->
</a>
<ul class="slicknav_hidden" role="menu" aria-hidden="true">
<li>
<a>Dekstops</a>
<!-- SUB-MENU-->
</li>
</ul>
</li>
<!-- THIS FOR SUB MENU FROM Dekstops -->
<ul class="slicknav_hidden" role="menu" aria-hidden="true">
<li>
Desktops & All In One
</li>
<li>
Desktop & All In One MSI
</li>
<li>
Desktop & All In One Acer
</li>
<li>
Desktop & All In One Asus
</li>
</ul>
<!-- THIS LOOPING LIKE DEKSTOPS -->
<li class="slicknav_collapsed slicknav_parent"></li>
<!-- LOOP SUB MENU2 -->
<li class="slicknav_collapsed slicknav_parent"></li>
<!-- LOOP SUB MENU3 -->
</ul>
</div>
</li>
<li class=""></li>
<!-- LOOP MENU 2 -->
<li class=""></li>
<!-- LOOP MENU 3 -->
</ul>
I really sorry,I can't upload all code (css)
For more details please check in here, change width browser to 768px, try second sub-menu (desktops)
Left : now | Right : What I want
If I open sub-menu (Computer) 1 by 1 and set .slicknav_nav .slicknav_row{display:none;} it's will be like Right (but each sub-menu (Computer) have lock arrow and must open 1 by 1).
Thanks Advance
Remove unwanted nested UL inside li
<li class="slicknav_parent slicknav_collapsed"><a>Dekstops</a></li>
I am trying to make my header with the Ink framework (CSS/JS) fixed so it does not move on the page while scrolling and I can't seem to make it so.
HTML:
<div id="topbar">
<nav class="ink-navigation ink-grid hide-all show-large">
<ul class="menu horizontal flat blue">
<li>
Home
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item<i class="icon-caret-down"></i>
<ul class="submenu">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<nav class="ink-navigation ink-grid hide-all show-medium show-small">
<ul class="menu vertical flat blue">
<li>
<a class="logoPlaceholder push-left" href="#" title="Site Title">Home</a>
<button class="toggle push-right" data-target="#topbar_menu" id="toggleVisibility">
<span class="icon-reorder"></span>
</button>
</li>
</ul>
<ul class="menu vertical flat blue hide-all" id="topbar_menu">
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li>
Menu item
</li>
<li class="">
<a class="toggle" data-target=".submenu" href="#">Menu item<i class="icon-caret-down"></i></a>
<ul class="submenu hide-all dropdown">
<li>
Submenu item
</li>
<li>
Submenu item
</li>
</ul>
</li>
</ul>
</nav>
<div class="border">
</div>
</div>
I've looked and tried toggling around with the CSS package but could not get it going.
Any help would be appreciated!
are you using last version release or are you using the source from github?
In last version release we have a bug and it does not work if the element is wider than 90% of the viewport width.
Get the last build from https://github.com/sapo/Ink/tree/develop/dist and use:
<div id="topbar" data-offset-top="0" class="sticky" data-activate-in-layouts="large,medium,small">
....
attribute "data-activate-in-layouts" is optional to make it work in the selected viewport sizes.
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>