CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Damir
Damir

Reputation: 47

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?

Upvotes: 1

Views: 612

Answers (2)

jyrkim
jyrkim

Reputation: 2869

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);
    });
}

Upvotes: 1

Anubhav
Anubhav

Reputation: 7208

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> <a href="#"><span class="pos">about us</span></a>

      <ul>
        <li><a href="#">who we are</a>
        </li>
        <li><a href="#">what we do</a>
        </li>
        <li><a href="#">where we are</a>
        </li>
        <li><a href="#">other information</a>
        </li>
      </ul>
    </li>
    <li> <a href="#"><span class="pos">accomodation</span></a>

      <ul>
        <li><a href="#">apartments</a>
        </li>
        <li><a href="#">hotels</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions