I have a menu structure like the below in Drupal 7. This is a part of the Nicemenu module in Drupal. I am applying a width to the second level ul - the sub menu ul, and this gets applied to all the second level ul. What I need is a variable width for the second level ul's. All these HTML sre dynamically generated by Drupal and I may not be able to hard code any classes or ID to these second level uls. I targeted these using pseudo-classes but didn't achieve what I want.
Here's the HTML
<ul class="menu">
<li class="first leaf"><a class="active" href="">Menu 1</a></li>
<li class="expanded"><a title="" href="">Menu 2</a>
<ul class="menu"> <!--This should have width of 200px-->
<li class="first leaf">Menu 2a</li>
<li class="last leaf">Menu 2b</li>
</ul>
</li>
<li class="expanded"><a title="" href="">Menu 3</a>
<ul class="menu"><!-- Width should be 350px-->
<li class="first leaf">Menu 3a</li>
<li class="leaf">Menu 3b</li>
<li class="leaf">Menu 3c</li>
<li class="leaf">Menu 3d</li>
<li class="leaf">Menu 3e</li>
<li class="leaf">Menu 3f</li>
<li class="leaf">Menu 3g</li>
<li class="last leaf">Menu 3h</li>
</ul>
</li>
<li class="expanded"><a title="" href="">Menu 4</a>
<ul class="menu"><!-- Width should be 200px-->
<li class="first expanded"><a title="" href="">Menu 4a</a><ul class="menu">
<li class="first last leaf">Menu 4a-1</li>
</ul>
</li>
<li class="last leaf">Menu 4b</li>
</ul>
</li>
<li class="leaf">Menu 5</li>
<li class="expanded"><a title="" href="">Menu 5a</a>
<ul class="menu"><!-- Width should be 150px-->
<li class="first last leaf">Menu 5b
</li>
</ul>
</li>
<li class="leaf">Menu 6</li>
<li class="leaf">Menu 7</li>
<li class="expanded"><a title="" href="">Menu 8</a>
<ul class="menu"><!-- Width should be 200px-->
<li class="first leaf">Menu 8</li>
<li class="last leaf">Menu 9</li>
</ul></li>
<li class="last leaf">Contact Us</li>
</ul>
You really need id attributes in your <ul> elements, so you can use CSS to set the widths for each id. This is the most convenient and robust way to style separate HTML elements.
Add html ID to content field shows a solution how to add these id attributes.
Related
I need one particular element of an unordered list to appear at the top of the list on page load, but not at the top of the page.
My code below works on Firefox and Safari, but not on Chrome or Opera. I use Javascript only.
Note that if I remove location.replace('#'); , the element will jump to the top of the page on page load, which is unwanted.
location.replace('#e');
location.replace('#');
#e {
color:#fff;
background:red;
}
#list {
overflow:auto;
height:100vh;
border:1px solid #000;
}
<div>LOGO</div>
<ul id="list">
<li id="a">Link a</li>
<li id="b">Link b</li>
<li id="c">Link c</li>
<li id="d">Link d</li>
<li id="e">Link e</li>
<li id="f">Link f</li>
<li id="g">Link g</li>
<li id="h">Link h</li>
<li id="i">Link i</li>
<li id="j">Link j</li>
<li id="k">Link k</li>
<li id="l">Link l</li>
<li id="m">Link m</li>
<li id="n">Link n</li>
<li id="o">Link o</li>
<li id="p">Link p</li>
<li id="q">Link q</li>
<li id="r">Link r</li>
<li id="s">Link s</li>
<li id="t">Link t</li>
<li id="u">Link u</li>
<li id="v">Link v</li>
<li id="w">Link w</li>
<li id="x">Link x</li>
<li id="y">Link y</li>
<li id="z">Link z</li>
<li id="aa">Link aa</li>
<li id="ab">Link ab</li>
<li id="ac">Link ac</li>
<li id="ad">Link ad</li>
<li id="ae">Link ae</li>
<li id="af">Link af</li>
<li id="ag">Link ag</li>
<li id="ah">Link ah</li>
<li id="ai">Link ai</li>
<li id="aj">Link aj</li>
<li id="ak">Link ak</li>
<li id="al">Link al</li>
<li id="am">Link am</li>
<li id="an">Link an</li>
<li id="ao">Link ao</li>
<li id="ap">Link ap</li>
<li id="aq">Link aq</li>
<li id="ar">Link ar</li>
<li id="as">Link as</li>
<li id="at">Link at</li>
<li id="au">Link au</li>
<li id="av">Link av</li>
<li id="aw">Link aw</li>
<li id="ax">Link ax</li>
<li id="ay">Link ay</li>
<li id="az">Link az</li>
</ul>
Although there is probably a smoother way to do it, here is the javascript that solves my issue:
location.replace('#e');
setTimeout(function() {
location.replace('#');
}, 1);
I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>
Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>
$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});
i am having an issue with a menu using bootstrap. The small drop down menus open fine and are aligned however the large drop down menus always align left even if the menu heading is on the far right of the screen
i am looking to have one of the following happen
1 - open in the middle below the heading
2 - open to the right if its to far left
3 - open to the left if its to far right
i have created a fiddle of the issue
https://jsfiddle.net/fu847jnw/2/
how can i acheive the above
<div class="navbar-cont">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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 navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>Products
</li>
<li>About Us
</li>
<li>Contact Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Large Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
This Is Really Large Title <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Just Another Menu Type<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Us
</li>
<li>Contact Us
</li>
<li>My Account
</li>
<li>Wish List
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li>Available glyphs
</li>
<li class="disabled">How to use
</li>
<li>Examples
</li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li>Example
</li>
<li>Aligninment options
</li>
<li>Headers
</li>
<li>Disabled menu items
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li>Basic example
</li>
<li>Button toolbar
</li>
<li>Sizing
</li>
<li>Nesting
</li>
<li>Vertical variation
</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Single button dropdowns
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li>Basic example
</li>
<li>Sizing
</li>
<li>Checkboxes and radio addons
</li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li>Tabs
</li>
<li>Pills
</li>
<li>Justified
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li>Default navbar
</li>
<li>Buttons
</li>
<li>Text
</li>
<li>Non-nav links
</li>
<li>Component alignment
</li>
<li>Fixed to top
</li>
<li>Fixed to bottom
</li>
<li>Static top
</li>
<li>Inverted navbar
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an example using your code. In the HTML I added a class tmenu-menu to your last menu item, like this:
Tmenu <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">
Then added this code in the CSS
#media (min-width: 1200px) {
.tmenu-menu {
right: 0;
left: inherit;
}
}
Now when you view your site and the width of your browser is 1200px or bigger you will see the large menu sit on the right hand side of your screen. Then when you shrink down the menu once below 1200px the menu will go back to the left side. One SO answer provides the various break points sizes but these are also available on the bootstrap website.
You will have to add your own custom classes and position the menus based on where you want them for each width size. I have updated your js.fiddle with my example code (I also left in the different media sizes that BS uses). This code isn't complete but should help you get pointed in the right direction. Hope that helps.
In Zurb foundation, I've found top-bar to be working good. But whenever large no of menu Items are added, the menu items float down instead of collapsing.
Normal Image:
Issue Image:
Expected Image:
Code:
<div class="fixed">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="has-dropdown">WIKISAN
<ul class="dropdown">
<li>Choose Another Program</li>
<li>Home</li>
</ul>
</li>
<li class="has-dropdown">Organization
<ul class="dropdown">
<li>List Organization</li>
<li>Add Organization</li>
</ul>
</li>
<li class="has-dropdown">Group
<ul class="dropdown">
<li>List Group</li>
<li>Add Group</li>
</ul>
</li>
<li class="has-dropdown">Individual
<ul class="dropdown">
<li>List Individual</li>
<li>Add Individual</li>
<li>Add Individual To Program</li>
</ul>
</li>
<li class="has-dropdown">Program
<ul class="dropdown">
<li class="has-dropdown">Kisan
<ul class="dropdown">
<li>Kisan Training Form</li>
<li>Kisan Training List </li>
<li>Kisan Leverage Form</li>
<li>Kisan Leverage List</li>
<li>Kisan Asset </li>
<li>Kisan Seed </li>
</ul>
</li>
</ul>
</li><li class="has-dropdown">Settings
<ul class="dropdown">
<li>Land Unit Converter</li><li>Add Indicator</li><li>Add District</li><li class="has-dropdown">Individual Lookup
<ul class="dropdown">
<li>Individual Activity</li>
<li>Individual Education</li>
<li>Language</li>
<li>Latrine Type</li>
<li>Occupation List</li>
<li>Project List</li>
<li>Religion</li>
<li>Social Group</li>
</ul>
</li><li class="has-dropdown">Organization Lookup
<ul class="dropdown">
<li>Organization Category</li>
<li>Organization Component</li>
<li>OCAT Stage List</li>
<li>Organization Sector</li>
<li>Organization Type</li>
</ul>
</li><li class="has-dropdown">Group Lookup
<ul class="dropdown">
<li>Group Registration</li>
<li>Group Sector</li>
<li>Group Type</li>
</ul>
</li><li class="has-dropdown">Training Lookup
<ul class="dropdown">
<li>Training Sector</li>
<li>Beneficiary Type</li>
<li>Training Type</li>
</ul></li><li class="has-dropdown">Leverage Lookup
<ul class="dropdown">
<li>Leverage Scheme</li>
</ul></li></ul></li> <li class="has-dropdown">Report
<ul class="dropdown">
<li>Report Dashboard</li>
<li>Summary Query Report</li>
</ul>
</li>
</ul>
<ul class="right">
<li class="has-dropdown"> Logged in as Sujit Prasad Baniya
<ul class="dropdown">
<li>Change Password</li><li>User Location Settings</li><li class="has-dropdown">Admin
<ul class="dropdown"><li>Add users</li>
<li>List users</li>
<li>Set Program Targets</li>
<li>Set Default Location</li>
<li>Query Log Report</li><li>Debug Mode On</li><li>Add Program</li>
<li>List Program</li>
<li>Add Activity</li>
<li>Add Activity To Program</li></ul></li>
<li>Logout</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Here is the code that generated following result
I would like to add that class "last-item" every last li.
Im trying this but without sucess:
<script>
$(".cbp-tm-submenu .product-categories li .children li:last-child").addClass("last-item");
<script>
I tried put on header and on footer.
HTML:
<ul class="cbp-tm-submenu">
<img class="backgroundtooltiptop" alt="background tooltip" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundtop.png">
<li id="woocommerce_product_categories-4" class="widget woocommerce widget_product_categories">
<ul class="product-categories">
<li class="cat-item cat-item-16 current-cat cat-parent">
Lançamentos
<ul class="children">
<li class="cat-item cat-item-17">
teste
</li>
<li class="cat-item cat-item-18">...</li>
<li class="cat-item cat-item-19">...</li>
</ul>
</li>
</ul>
</li>
<img class="backgroundtooltipbot" alt="background tooltip bot" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundbot.png">
</ul>
This is enough:
$(".cbp-tm-submenu li:last-child").addClass("last-item");