I have a list where every item has a sublist. To style them i have used CSS.
<ul class="left">
<li class="itemc">Item 1
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 2
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 3
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 4
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
The whole script can be found here
My problem is when I press an item from the main list, the sub-list is shown, but the other items from the main list go one over the other. How or what should I modify to make it work? I mean, when an item is clicked the sublist to be shown and the next item to be aligned to the end of the sublist?
Add two additional properties to your .left li class:
.left li {
float: left;
clear: left;
}
Updated jsfiddle
The problem comes from the fact that when the subitem opens, the items positions aren't changed. They stay at the same place.
As you can see here (3D view from Firefox), items 3 and 4 still have their original place (item 2 clicked), and the subitem comes above them.
The subitem is actually not considered as being in the item. So when it's being displayed, the other items don't see any change in the item above them and stay at the same place. But the text is affected by the submenu though. And so it gets put at the end of it. All of this is due to the float: left; on the subitem.
To fix that, you just need to add clear: both; or clear: left; to .left li in the CSS.
EDIT: Seems I am late sorry...
Little note: You should avoid having .left li after .left .submenu li, it could replace some of the properties you put before.
Related
I have built an collapsable tree with li and ul elements. I am using the jQuery.fadeIn and jQuery.fadeOut to collapse respectively show branches in the tree by applying these functions to nested ul elements.
Works nearly perfect, but a small problem appears when collapsed branches are shown: If the branch to show contains collapsed branches itself, the collapse state of these branches will not be preserved meaning that all the child branches will also be shown.
<li id="branch1"> Item 1
<ul style="display:none">
<li> Branch 1
<ul style="display:none">
...
</ul>
</li>
</ul>
</li>
If I now call the following, also the Branch 1 will be faded in.
jQuery("#branch1 ul").fadeIn();
Its because your query is getting both the elements. $('#branch1 ul') returns them both. Use this to get just the first one:
var a= jQuery("#branch1>ul")
a.fadeIn();
It was my problem by applying the function to multiple elements using an incorrect jQuery-selector. The function should work as expected.
Your code structure be like this
<ul>
<li id="branch1"> Item 1 </li>
<ul style="display:none">
<li> Branch 1</li>
<ul style="display:none">
<li> Branch 3</li>
</ul>
</ul>
in this structure your jQuery code will be work .
jQuery("#branch1 ul").fadeIn();
I'm using a ul with several child lis for navigation with html/javascript and css. Problem is, on tapping, it selects the Menu1 text (like it would when you want to copy text), while opening the menu. Using Windows 8, ie11, on surface tablet. I don't want the text selected, how can I stop this?
<ul id="nav" class="dropdown dropdown-horizontal">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li aria-haspopup="true" style="cursor:pointer"><span class="dir">Menu1</span>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</li>
</ul>
Maybe try something like this:
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
And then CSS
li {
position:relative;
}
li > a {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
z-index:2;
}
This would put the anchor on top of the text, thereby making it clickable but not allowing the text to be copyable.
What I'm trying to do is putting content of "|" after each first level anchor tag "which is the main menu not the sub-menu" follow #menuCont but exclude the last child.
tried to do it with CSS then I had unexpected result, then tried with jQuery and I had another unexpected result.
Main page menu HTML
<div id="menuCont">
<ul>
<li>
About
<ul>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
</ul>
</li>
<li>News</li>
<li>Gallery</li>
<li>Activities</li>
<li>Facilities</li>
<li>Students</li>
<li>Staff</li>
<li>Contact info</li>
</ul>
</div>
Another page menu HTML
<div id="menuCont">
<ul>
<li>Home</li>
<li>
Static pages
<ul>
<li>Homepage</li>
<li>Vision</li>
<li>Mission</li>
<li>Values</li>
<li>Contact info</li>
</ul>
</li>
<li>
Dynamic pages
<ul>
<li>News</li>
<li>Gallery</li>
<li>Videos</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Create accounts</li>
<li>Edit accounts</li>
<li>Assign Students</li>
<li>Assign teachers</li>
</ul>
</li>
</ul>
</div>
CSS Controlers
CSS approch
#menuCont ul li a:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
#menuCont ul li a:last-child:after {content:"" !important;}
CSS Approch for jQuery
#menuCont ul li a.conAfter:after {content:"|"; font-size:30px; color:#FFF !important; font-weight:bold; color:#044c9e; margin:15px 5px;}
jQuery code
$("#menuCont").children().children().children("a:not(:last-child)").addClass("conAfter")
The unexpected results in reflect of the CSS approch:
"Main page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
From Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie = it just selects all of the anchor tags and add the content to them and totally ignored where I ask to remove the content from last child.
-This is different-From Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
The unexpected results in reflect of the jQuery approch:
"Main page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, which is they select only first child and add the content to it.
"The other page"
From Ie,Ff,Gc,Sf,Op = I get the same from all of them, they add the content to all of the elements except the first anchor tag.
Thanks all.
Thanks to #charlietfl I managed to reach a neutral state.
I will emphasis the solution in case somebody reaches that post with the same problem.
To get only the first level of children I need to use CSS child selector ">" start from the ancestor to the parent to the child if you get what I mean, that will give me an exact and specific selection.
And the other problem I didn’t notice that I’m calling the last child of the anchor tag instead of calling the anchor tag itself < a >, by calling the last child of < li > which is a, I got what I wanted.
Yet, IE8 didn’t understand that line, but all of the other browsers get it quiet good.
Good luck all!
If use > will denote children only
#menuCont > ul > li >a:after {content:"|";padding:0 10px; color:red;font-weight:bold ; }
#menuCont > ul> li:last-child >a:after {content:"" !important;}
Also note looking for <a> of last child <li>
DEMO
couple thing i see are the color is making the link invisible if you have a white background, but the underline needs text:decoration:none;
is this fiddle here what you are after?
http://jsfiddle.net/MV2dn/2/
I am trying to change the css class of the parent list item when a child list is hovered. For example, I have:
<ul class="ipro_menu">
<li class="menu-first">
First
<ul class="sub-menu">
<li>Other A</li>
<li>Other B</li>
</ul>
</li>
<li class="menu-second">Second</li>
</ul>
So, what I'm trying to accomplish is when a .sub-menu li element is hovered, change the class of the parent li it resides in. In this example, if li containing "Other A" or "Other B" is hovered, change the class of the li.menu-first.
I've tried:
$('.sub-menu li').hover(function(){
//$(this).closest('.ipro_menu li').addClass('color_a');
//$(this).parent().addClass('color_a');
//$(this).parents('li').prev().addClass('color_a');
// None of the above 3 worked...
});
I think you just want:
$(this).parents("li").addClass("color_a")
That should work. I don't know why you added .prev() in your attempt.
I'm currently setting up a menu including sub menu, built on Wordpress categories. Basically, I'm retrieving all the top level categories, and then build a submenu on each, with all the posts from that parent category.
So the structure looks like this :
<ul class="menuCat">
<li> lifestyle
<ul class="show-hide">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
</li>
<li> musique
<ul class="show-hide">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</li>
</ul>
<div id="content">...
The sub menus are set to display:none. When a category gets clicked, the submenu ul appears (using jQuery toggle) under the main menu. I'm running it locally so I can't give you a live example, but the way it works is the same as when you hit the "categories" link here : http://wpshower.com/demo/?theme=imbalance.
My problem is that with this structure and for what I want to visually achieve (c.f previous url), I don't see any other option that putting the submenu block in an absolute position. But if I do so, I need to push the rest of the content down, when a menu is triggered. What I've tried so far, is to set a margin-top based on the height of the currently viewed submenu. Unfortunately, neither height or outerHeight could help me...
Any ideas ?
Thanks!
Can you go into more detail about why you need to position absolute? Looks to me like you could achieve what you want by having all your submenus statically positioned below the top level menu, using jQuery to ensure only one is shown at a time.
By having them statically positioned the submenu will push the content below it down when it expands, and as long as all but one submenu is always set to display: none; you won't even know it's there.
For this to work however, you'll need to change the structure of your html though. The submenu items will need to be in a div below the top level menu list, not within it.
<ul class="menuCat">
<li> lifestyle
</li>
<li> musique
</li>
</ul>
<div id="submenu-container">
<ul class="show-hide lifestyle">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
<ul class="show-hide musique">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</div>
<div id="content"></div>
$(function () {
$('.menuCat > li').click(function (e) {
var target = $('.show-hide.' + e.target.title);
$('.show-hide').not(target).hide();
target.toggle();
});
});
ul.menuCat li {
display:inline-block;
vertical-align: top;
}
ul.show-hide {
display: none;
background-color:lightgrey;
}
#content {
height: 200px;
width: 100%;
background-color: red;
}
For an example see this demo: http://jsfiddle.net/ijoukov/PCgxR/
Some news, I think I can't modify the HTML structure because the submenus are built in the same time as the parent list-item, within the 'start_el' wordpress function. That function gets called for each category link in the menu.