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>
Related
I have a nested dropdown navigation as shown below :
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li> Hi </li>
<li class="parent_li" data-target="#products_sidebar" data-trigger="click" data-toggle="collapse" data-placement="right">
Sub Route
<ul class="sub-menu collapse" id ="products_sidebar">
<li >Sub A</li> <!-- gets a class "active" on click -->
</ul>
</li>
</ul>
</div>
The li for sub-route gets highlighted on click(done using active-class of vue router-link). But how to highlight its parent li (.parent_li) ?
I know this can be handled in JS. But i am expecting solution in SASS or CSS
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>
all...
So here's my BOOTSTRAP code for a vertical DROP DOWN side bar menu:
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li class="dropdown" id="dropdown1">
Projects <span class="caret"></span>
<ul class="dropdown-menu">
<li class="page-scroll">In Development</li>
<li class="page-scroll">Pre-Production</li>
<li class="page-scroll">Production</li>
</ul>
</li>
<li>Showcase</li>
<li>Dream Team</li>
<li>Contact</li>
<li class="dropdown" id="dropdown2">
My<br>Entertainment <span class="caret"></span>
<ul class="dropdown-menu">
<li class="page-scroll">Projects</li>
</ul>
</li>
<li>Privacy Policy</li>
<li>Terms of Use</li>
</ul>
</div><!-- /.navbar-collapse -->
So here are the images which best displays what's occurring:
Then when you hover on SUB MENU, the NEXT MENU is highlighted...
This is very confusing...
Any thoughts?
Thanks
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 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.