We Keep Coding

Cannot get span position with jQuery

I have this navigation here and i need to make the submenu aligned with the topmenu anchor text.
I can do that by moving the whole inner ul to the left with css. But it's a different amount for every li element. Since my anchor needs to be as big as the li i created a span around the text and my plan was to measure its distance form the parent and apply that number to left property of the inner ul. This is what i have so far:
jQuery(document).ready(function(){
menuAlign();
});
function menuAlign(){
$('nav.main-nav > ul > li:not(.small)').each(function(){
var self = $(this);
var innerMenu = self.children('ul');
var posOffset = self.children('.pos').position();
innerMenu.css( "left", posOffset.left );
});
}
I get an error on this line innerMenu.css( "left", posOffset.left ); saying:
Uncaught TypeError: Cannot read property 'left' of undefined
What am I doing wrong? Is there a way to achieve this with CSS?

I changed your menuAlign() function slightly, because I think it was looking the span with class="pos" in a different place where it actually was. Hopefully it's working in improved fashion :-) fiddle
function menuAlign() {
$('nav.main-nav > ul > li:not(.small)').each(function () {
var self = $(this);
var innerMenu = self.children('ul');
var parent = innerMenu.parent();
var posLeft = parent.find(".pos").position().left;
innerMenu.css("left", posLeft);
});
}

Removing the margin from nav.main-nav > ul > li > ul might help you. FIDDLE. I also added some padding to nav.main-nav > ul > li > ul > li.
.clearfix:after {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
body {
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
/* trick for navigation */
}
nav.main-nav > ul {
padding: 0;
background-color: #f6a000;
border-bottom: 1px solid #fff;
}
nav.main-nav > ul > li {
display: inline-block;
position: relative;
z-index: 100;
width: 30%;
height: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border-right: 1px solid #fff;
float: left;
}
nav.main-nav > ul > li.small {
width: 2%;
}
nav.main-nav > ul > li > a {
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 60px;
font-size: 16px;
color: #fff;
}
nav.main-nav > ul > li > ul {
position: absolute;
left: 0;
top: 100%;
width: 100%;
padding: 0;
_margin: 0 -1000em;
z-index: 101;
visibility: hidden;
opacity: 0;
background-color: #F67900;
list-style: none;
}
nav.main-nav > ul > li:hover {
background-color: #F67900;
}
nav.main-nav > ul > li:hover > ul {
visibility: visible;
opacity: 1;
}
nav.main-nav > ul > li > ul > li {
padding: 20px;
}
nav.main-nav > ul > li > ul > li > a {
color: #fff;
font-size: 16px;
}
nav.main-nav > ul > li:hover .drop {
font-weight: bold;
}
<nav class="main-nav">
<ul class="clearfix">
<li> <span class="pos">about us</span>
<ul>
<li>who we are
</li>
<li>what we do
</li>
<li>where we are
</li>
<li>other information
</li>
</ul>
</li>
<li> <span class="pos">accomodation</span>
<ul>
<li>apartments
</li>
<li>hotels
</li>
</ul>
</li>
</ul>
</nav>

Highlight current page menu item. Also highlight main menu item when sub menu item is selected

I am working on a project in ASP.net using C#. I have a masterpage in which there is a menu with sub menus for some menu items. I want the current page menu item be highlighted when selected. Also I want the main menu item be highlighted when any of the sub menu items are selected or their link is opened in the same page.
Any idea or solution using CSS or Javascript is expected. I have searched for solution on this forum but my requirements are different so i have failed till now to find a feasible one.
<pre>
Javascript:
<script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav').find('li a').click(function () {
$('#nav').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
</pre>
<pre>
CSS:
#nav {
height: 50px;
width: auto;
position: relative;
background-color: #ad8f5d;
}
#nav ul li {
width:150px;
text-align:center;
}
#nav ul li a
{
color: Black;
font-size: 13px;
font-weight: bold;
line-height:50px;
text-decoration: none;
}
#nav li a.active
{
color:White;
}
#nav ul li a.has_submenu {
background: transparent url('../Images/submenu-item.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul li a.has_submenu {
background: transparent url('../Images/submenu-item-invert.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul ul li a.has_submenu:hover, #nav ul ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
#nav ul ul li a {
float: none;
width: 170px;
}
#nav ul > li:hover > a
{
background-color: #1f478d;
}
#nav ul ul > li:hover > a
{
background-color: #1f478d;
}
/*--------------------------Item Image Hover change---------------------CSS----*/
#nav ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
/*--------------------------Item Image Hover change---------------------CSS ends----*/
#nav ul li a:hover, #nav ul li.sfHover a{
background-color: #1f478d;
}
#nav ul ul a
{
background-color: #ad8f5d;
}
#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
background-color: #1f478d;
}
.sf-menu, .sf-menu *
{
height:50px;
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px;
margin-top: 0px;
padding-top: 0;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 49px;
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 170px;
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em;
top: 0;
}
</pre>
<pre>
HTML:
<div id="nav">
<ul class="sf-menu">
<li class="menu-item">Home</li>
<li class="menu-item"><a class="has_submenu" href="#">Examples</a>
<ul>
<li>Static Text Page</li>
<li>Static Frontpage</li>
<li>Another link</li>
</ul>
</li>
<li class="menu-item"><a class="has_submenu" href="#">Products</a>
<ul>
<li>Product One</li>
<li>Product Two</li>
<li>Product Three</li>
</ul>
</li>
<li class="menu-item">Solutions</li>
<li class="menu-item">Contact</li>
</ul>
</div>
</pre>

Use this code, if you need more then ask me.
$(document).ready(function () {
$('.menu-item').click(function () {
alert("S");
$('.menu-item a').css("color","black");
$(this).find('a').css("color","red");
// $($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});

3rd level for CSS / Javascript menu

This has probably been asked a lot, but I can't seem to get it to work.
I'm trying to set up this CSS / JavaScript menu; before I submit it to my website, so please bear with me on the text/colour formatting. :-)
When I first created it, it was two level. ButI want to add a third tier, vertically.
When I added the code for the 3rd level, the second level just becomes a non clickable link and doesn't show the 3rd level.
HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#'><span>Geeky Sites</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Forums</span></a>
<ul>
<li><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Music and Bands</span></a>
<ul>
<li><a href='http://www.acdc.com/us/home' target='_blank'><span>AC/DC</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>iOS Apps</span></a>
<ul>
<li><a href='https://itunes.apple.com/gb/app/reeder-2/id697846300' target='_blank'><span>Reeder 2</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>Other Stuff</span></a>
<ul>
<li><a href='http://www.flickr.com/' target='_blank'><span>Flickr - Great</span></a></li>
</ul>
</li>
</ul>
</div>
JavaScript:
$( document ).ready(function() {
$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
});
CSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 881px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #b0b0b0;
color: #ffffff;
border-bottom: 1px solid #7d7d7d;
}
#cssmenu > ul > li > a > span {
background: #c9c9c9;
padding: 10px;
display: block;
font-size: 15px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #b0b0b0;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #787878;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #de8666;
text-indent: 0;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #f4f4f4;
}
#cssmenu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#068;
}
#cssmenu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#cssmenu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#cssmenu > li > ul > li ul > li:hover > span{
color:#fff;
}
My JSFiddle
Thanks

I have created what I believe you are looking for:
Here's a link to the JS Fiddle: http://jsfiddle.net/myJaM/41/
jQuery
function expand($elem) {
$('#cssmenu li.active').removeClass('active');
$elem.closest('li').addClass('active');
var checkElement = $elem.next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$elem.closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
checkElement.slideDown('normal');
}
var $childList = $elem.find('li').find('ul');
if ($childList.children().length == 0) {
return true;
} else {
return false;
}
}
$('#cssmenu > ul > li ul').each(function (index, e) {
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul li a').click(function () {
expand($(this));
});
$("#cssmenu > ul > li > a").click(function(){
var $thisList = $(this).parent().find("ul");
$("#cssmenu ul").not('#'+$thisList.attr('id')).not("#menu-root").slideUp("normal");
});
HTML
<body>
<div id='cssmenu'>
<ul id="menu-root">
<li class='has-sub'><a href='#'><span>Geeky Sites</span></a>
<ul id="list-geeky-sites">
<li class='has-sub'><a href='#'><span>Forums</span></a>
<ul>
<li><a href='http://tools.email-checker.com/' target='_blank'><span>SMTP Checker</span></a>
</li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Music and Bands</span></a>
<ul id="list-music">
<li><a href='http://www.acdc.com/us/home' target='_blank'><span>AC/DC</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>iOS Apps</span></a>
<ul id="list-ios">
<li><a href='https://itunes.apple.com/gb/app/reeder-2/id697846300' target='_blank'><span>Reeder 2</span></a>
</li>
</ul>
</li>
<li class='has-sub last'><a href='#'><span>Other Stuff</span></a>
<ul id="list-other">
<li><a href='http://www.flickr.com/' target='_blank'><span>Flickr - Great</span></a>
</li>
</ul>
</li>
</ul>
</div>
</body>

Drop down menu, CSS, HTML and JavaScript: JavaScript making menu jump and not function correctly

I have a simple drop down menu, but when used it does not work correctly, I think there is a problem with the JavaScript as it just keeps bouncing up and down!
jsFiddle Here: http://jsfiddle.net/pJeDV/
<div class="container">
<ul id="coolMenu">
<li>Lorem</li>
<li>Mauricii</li>
<li>
Periher
<ul>
<li>Hellenico</li>
<li>Genere</li>
<li>Indulgentia</li>
</ul>
</li>
<li>Tyrio</li>
<li>Quicumque</li>
</ul>
CSS
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #f09d28;
}
#coolMenu ul li a {
color: #000;
}
#coolMenu ul li:hover a {
background: #ffc97c;
}
#coolMenu li:hover ul.noJS {
display: block;
}
JavaScript
<script type="text/javascript">
$(function(){
$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});
});
</script>
http://jsfiddle.net/pJeDV/

Here is the working fiddle: http://jsfiddle.net/surendraVsingh/pJeDV/6/
Jquery
$(function(){
$('#coolMenu > li').hover(function(){
$(this).find('ul').slideToggle();
});
});
CSS (remove below given code completely)
#coolMenu li:hover ul {
display:block; /* Remove This*/
}

is this what you're looking for? instead of using .find('> li') i used .children('a'). Also inside the .hover() function you're missing the mouseout function.
jsFiddle
here's the code:
$(function(){
$('#coolMenu').children('a').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.slideToggle('fast');
},function(){
$(this).find('ul')
.addClass('noJS')
.slideToggle('fast');
});
});

Submenu stay open on menu click

I have a problem with js menu code. first let me explain what I try to do.
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.
Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate.
So, here is the code I have so far:
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
Over Meves
<ul class="submenu">
<li>Historie</li>
<li>Onze mensen</li>
<li>Werkzijze</li>
</ul>
</li>
<li>
Disciplines
<ul class="submenu">
<li>Klimaatbeheersing</li>
<li>Elektrotechniek</li>
<li>Sanitaire techniek</li>
<li>Energiebesparingstechniek</li>
<li>Bouwfysica en geluid</li>
<li>Diensten energiebesparing</li>
</ul>
</li>
<li>
Expertise
<ul class="submenu">
<li>Woningbouw & Utiliteit</li>
<li>Zorg & Welzijn</li>
<li>Milieu & Energie</li>
<li>Beheer & Onderhoud</li>
<li>EPA & EPC</li>
<li>Legionella beheersing</li>
</ul>
</li>
<li>
Contact
<ul class="submenu">
<li>Adres & route</li>
<li>Werken bij</li>
</ul>
</li>
</ul>
</div>
The javascript:
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parent("ul.submenu").css('display', 'block');
}
});
});
And the css:
#topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Please help.
Edit
The submenu isn't showing when I load a parent page.
I've been playing with a code, but this is still not working:
$('#topnav a').each(function(){
var myHref= $(this).attr('href');
if( url.match( myHref)) {
$(this).addClass('active');
$(this).closest('ul').css('display', 'block');
}
});

Ok I found the answer. This will fix it:
$(document).ready(function()
{
$('#topnav ul li ul.submenu li a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('#topnav > ul > li > a').each(function(){
var currURL = document.location.href;
var myHref= $(this).attr('href');
if (currURL.match(myHref)) {
$(this).addClass('active');
$(this).parent().find("ul.submenu").css('display', 'block');
}
});
});