Develop Reference

menu with separate div sections

I have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle

I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)

Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.

angular ng-repeat and inline-block

I have inherited some code which uses horizontal lists in a form:
<ul>
<li>...</li>
<li>...</li>
</ul>
Where <li> is inline-block. I need to populate those lists with ng-repeat:
<ul>
<li ng-repeat="item in items">...</li>
</ul>
To avoid (well-known) gaps between inline-block elements they have to be written either:
<li>...</li><li>
...</li>
Or:
<li>...</li><!--
--><li>...</li>
But I have no idea how to achieve that with ng-repeat!
Anyone? :)
P.S.: I read this. I wonder if there's an elegant "angular specific" solution.

You can manage them by applying css rule:
li{
display: inline-block;
margin-right: -4px;
}
Or, if you don't want to use negative margin, then you can use float: left; instead of inline-block.
However, this would be costlier. Another solution I think is using ng-repeat-start and ng-repeat-end like below:
<ul>
<li ng-repeat="item in items">...</li><!--
<myDir ng-repeat-end>--></myDir>
</ul>
May be you need to use > instead of > and so on.
And with the compile function remove the element so that there would remain just --> using element.unwrap()
I'm not sure the above method would work fine as you're requiring. You could try this once in your project and let me inform.

If we want to muck around with css options...
ul {
font-size:0;
}
li {
display:inline-block;
font-size:12pt;
}

Unexpected result from CSS and jQuery

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/

aligning the bottom of one "bigger" ul with the bottom of another

I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!

Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.

I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
​​​​​​​​​​
Less markup is better
View the full jsfiddle.

Align one of several <li> to the right?

<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?

CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/

You might want float: right on the css for the logout link.

Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item