When removing one element out of 3 from the panel of a tile, the 2 elements left are not fully aligned to the right - theres 1 space left.
Before:
before
<ul class="nav navbar-right panel_toolbox">
<li class="dropdown"><i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1</li>
<li>Settings 2</li>
</ul>
</li>
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
After:
after
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"> </i></a></li>
<li><a class="close-link"><i class="fa fa-close"></i></a></li>
</ul>
The CSS for panel_toolbox looks like that:
.panel_toolbox {
float: right;
min-width: 70px; }
.panel_toolbox > li {
float: left;
cursor: pointer; }
.panel_toolbox > li > a {
padding: 5px;
color: #C5C7CB;
font-size: 14px; }
.panel_toolbox > li > a:hover {
background: #F5F7FA; }
and the CSS for navbar-right:
.navbar-right {
margin-right: 0; }
Can it be fixed?
Rod, In the CSS, instead of:
.panel_toolbox > li {
float: left;
cursor: pointer; }
It should be:
.panel_toolbox > li {
float: right;
cursor: pointer; }
Why don't you add a "pull-right" class on each element?
<ul class"nav navbar-right panel_toolbox">
<li class="collapse-link pull-right"></li>
<li class="close-link pull-right"></li>
</ul>
It should helps you
Related
I have a vertical menu with submenu. I want to close the the previous clocked menu when clicking the new one. I just could open it. but byt this code all of them stay open. how can I do that?
this is the HTML code
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
This is js:
<script>
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
</script>
and this is CSS:
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color:black;
font-family: IRANSans;
font-weight: 400;
}
Here you go...
Just change this...
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
...to this.
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
$(document).ready(function() {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function() {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color: black;
font-family: IRANSans;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I have built a very minimal menu for a portfolio site trying to keep the navigation clean using clickable layers. Its great except each time the user goes to a new page they have to click away to reopen the menu and submenus again.
I want to try and figure out how to reopen it to the last state it was on when the menu loads on another page. I figure I need to use a cookie to store the click that opened the various submenu but I am stuck on passing a clicked event onto the next page as a variable and then using that to effectively set the menu to where it was left off.
$( document ).ready(function() {
$('.dc-siteSimpleMenu ul li').click(function(ev) {
$(this).find('>ul').slideToggle()
.end().siblings().find('ul').hide();
ev.stopPropagation();
});
$('.dc-siteSimpleMenu-lvl-1 a').click(function(ev) {
$('ul .dc-siteSimpleMenu-lvl-2').hide();
$(this).next('ul .dc-siteSimpleMenu-lvl-2').css({
'display': 'flex',
'flex-direction': 'column',
'flex-wrap': 'wrap',
'height': '55px'
});;
ev.stopPropagation();
});
});
.dc-siteSimpleMenu {
height: 60px;
margin: 0px;
padding: 0px;
width: 100%;
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0em;
text-transform: uppercase;
}
.dc-siteSimpleMenu ul ul {
display: none;
}
.dc-siteSimpleMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dc-siteSimpleMenu li ul {
position: absolute;
left: 130px;
width: 130px;
top: 0px;
}
.dc-siteSimpleMenu ul li a {
text-decoration: none;
color: #979797;
transition: 0.25s;
}
.dc-siteSimpleMenu ul li a:hover {
color: #000000;
transition: 0.5s;
}
.dc-siteSimpleMenu-start {
position: fixed;
}
.dc-siteSimpleMenu-start>li>a {
position: relative;
top: 35px;
}
ul.dc-siteSimpleMenu-lvl-2 li {
flex-basis: 25%;
margin-right:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dc-siteSimpleMenu">
<ul class="dc-siteSimpleMenu-start">
<li><a href='#'>menu</a>
<ul class="dc-siteSimpleMenu-lvl-0">
<li><a href='#'>Item 1 (submenu)</a>
<ul class="dc-siteSimpleMenu-lvl-1">
<li><a href='#'>Item 1-1 (submenu)</a>
<ul class="dc-siteSimpleMenu-lvl-2">
<li><a href='#'>Item 1-1-1 (link)</a></li>
<li><a href='#'>Item 1-1-2 (link)</a></li>
<li><a href='#'>Item 1-1-3 (link)</a></li>
<li><a href='#'>Item 1-1-4 (link)</a></li>
<li><a href='#'>Item 1-1-5 (link)</a></li>
<li><a href='#'>Item 1-1-6 (link)</a></li>
<li><a href='#'>Item 1-1-7 (link)</a></li>
</ul>
</li>
<li><a href='#'>Item 1-2 (submenu)</a>
<ul class="dc-siteSimpleMenu-lvl-2">
<li><a href='#'>Item 1-2-1 (link)</a></li>
<li><a href='#'>Item 1-2-2 (link)</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Item 2 (link)</a></li>
<li><a href='#'>Item 3 (link)</a></li>
<li><a href='#'>Item 4 (link)</a></li>
</ul>
</li>
</ul>
</div>
Here is my jsfiddle https://jsfiddle.net/duncanchard/3gvo02tk/15/
I have Created Mega Menu.
On button click mega menu will create and drop down will come down.
The mega menu content bar will hide slider.
I want to move slider down when menu dropdown appears and and the position of slider is replaced by mega menu content.
Dropdown mega menu is in absolute position. if i change it to relative it will replace position of slider with mega menu dropdown content.But styling navbar is disturbed.
this is navigation code
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-left">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
Home <b class="caret"></b>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Software</li>
<li>Desktop</li>
<li class="disabled">Mobile</li>
<li>Tablet</li>
<li class="divider"></li>
<li class="dropdown-header">Hardware</li>
<li>Arduino</li>
<li>Raspberry PI</li>
<li>VoCore</li>
<li>Banana PI</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Nano-Tech</li>
<li>AFM</li>
<li>STM</li>
<li>Nano-Tubes</li>
<li>Nano-Wires</li>
<li>Materials</li>
<li class="divider"></li>
<li class="dropdown-header">A.I.</li>
<li>Artificial Intelligence</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">SaaS</li>
<li>On-Demand</li>
<li>No Software</li>
<li>Cloud Computing</li>
<li class="divider"></li>
<li class="dropdown-header">On-Premise</li>
<li>Data Center</li>
<li>Hosting Environment</li>
<li>Internal IT</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Server-Side</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Ruby</li>
<li>ColdFusion</li>
<li>ASP.NET</li>
<li>GO</li>
<li>Perl</li>
<li>Lasso</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Javascript to open dropdown
<script>
$(document).ready(function() {
jQuery(document).ready(function(){
$(".dropdown").hover(
function() { $('.dropdown-menu', this).stop().fadeIn("fast");
},
function() { $('.dropdown-menu', this).stop().fadeOut("fast");
});
});
}
</script>
css
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 0px;
width: 100%;
}
.megamenu>li>ul {
padding: 0;
margin: 0;
}
.megamenu>li>ul>li {
list-style: none;
}
.megamenu>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu>li ul>li>a:hover,
.megamenu>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled>a,
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
color: #999999;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #00A7E8;
}
.megamenu.disabled>a:hover,
.megamenu.disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
If you code this in jsFiddle or codepen or just combine html,css,and js code without php then we can see the real problem.
I'm not able to run you code.
But as per your question i can say it may be issue with z-index.
My problem is creating a method that (on clicking a element) collapse all other elements within the nestled list that are not the target element or associated parent containers. I have looked around but nothing works for my list.
Basically I'm trying to collapse all active list elements except the target one.
Using bootstrap to handle a lot of things.
I have a method that makes a list element active on click.
The alert seems to output the ids of elements that need to be affected, and nothing collapses. Suggestions?
List Structure:
- Building
- Floor
- Room
Code:
//JS - Attempt to collapse all elements not clicked:
$('.expandable-menu a').click(function(e) {
var parent = $("#" + e.target.id).attr('data-parent');
$(".expandable-menu a").each(function() {
//if 1. has class active 2.Not target event, 3.Not a parent of target
if ($(this).hasClass('active') && $(this).attr('id') !== (e.target.id) && $(this).attr('id') !== (parent)) {
// alert($(this).attr('id') );
$(this).removeClass('active').addClass('collapsed');
}
});
});
<!--HTML - Example chunk from list:-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<ul>
<li id="level1">
<a id="title-b0" href="#" data-toggle="collapse" data-parent="#title-loc" data-target="#content-b0" class="collapsed" aria-expanded="false">
<span class="glyphicon glyphicon-triangle-right"></span>
Biology
</a>
<ul id="content-b0" class="nav collapse" style="height: 0px;" aria-expanded="false">
<li id="level2">
<a id="title-b0f0" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f0" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom"></span>
Floor 4
</a>
<ul id="content-f0" class="nav collapse in" style="" aria-expanded="true"></ul>
<a id="title-b0f1" class="" href="#" data-toggle="collapse" data-parent="title-b0" data-target="#content-f1" aria-expanded="true">
<span class="glyphicon glyphicon-triangle-bottom"></span>
Floor 3
</a>
<ul id="content-f1" class="nav collapse in" style="" aria-expanded="true">
<li>
<a id="room-select" href="#">
<span class="glyphicon glyphicon-unchecked"></span>
Room 112
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This example may help you out
$(document).ready(function() {
$('.tree li').each(function() {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function() {
$('.tree li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
$('.tree li').each(function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
a{
cursor:pointer;
}
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
background-position: 25px center;
content: "-";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
#wrapper {
margin: 0 auto;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper">
<div class="tree">
<button id="all">Toggle All</button>
<ul>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li><a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li><a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
</div>
</div>
Making an accordion menu its lost its slide down/up function what am I doing wrong?
Can someone check this code
Jquery
$(document).ready(function() {
$('.nav-pills ul li').on('click touchstart', function(e) {
e.preventDefault();
var checkElement = $(this).next();
$('.nav-pills li').removeClass('open');
$(this).closest('li').addClass('open');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('open');
checkElement.slideUp(300);
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('nav-pills ul ul:visible').slideUp(300);
checkElement.slideDown(300);
}
if($(this).closest('li').find('ul').children().length == 0){
return true;
}
else {
return false;
}
});
});
HTML
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>I Want to Be a Landscape Architect (Video)
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Does A Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews with Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>DesignIntelligence Rankings (2013)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">How Do I Learn More?</a>
<ul class="dropdown-menu">
<li>Graduating Student Surveys</li>
<li>ACE Mentor Program</li>
<li>Find An ASLA Student Chapter</li>
<li>Learn New Software Programs</li>
<li>Local Parks / Conservation Programs</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Personal Stories</a>
<ul class="dropdown-menu">
<li>The Path</li>
<li>Obstacles</li>
<li>Aids</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">About Columbus Circle</a>
<ul class="dropdown-menu">
<li>Learn More About Columbus Circle</li>
<li>Before Photo</li>
</ul>
</ul>
</div>
</div>
</div>
CSS
.nav-pills > li > a {
border-radius: 0px;
line-height: 1.5;
}
.nav-container {
max-width: 26%;
width: 280px;
top: 90px;
left: 45px;
padding: 0;
background-color: #000000;
position: fixed;
z-index: 3;
cursor: pointer;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: #f26527;
color: #ffffff;
}
.dropdown > a {
color: #ffffff;
}
.dropdown-menu {
border-radius: 0px;
padding: 0px;
position: relative;
width: 345px;
z-index: 4;
}
.dropdown-menu > li > a {
line-height: 1.3;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
background-color: #f26527;
}
.dropdown-menu li {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica", "Ariel", "sans- serif";
font-weight: 300;
background: #ffffff;
line-height: 1.5;
}
The menu works like and accordion but again has lost its sliding function it just drops down
Thanks
I've encountered this too, and if you tried all the possible solutions here, the answer is that lists cant animate, that if youre trying to animate the list.
Best way is to wrap the lists in a div.