CODEWITHSUNDEEP
jquerycsshtml
froadie
froadie

Reputation: 83033

Locking menu on scroll slightly off

I'm setting up a horizontal menu using CSS and HTML5. (My experience with both is limited.) This is my menu css:

.horizontalMenu { 
    background-color:  white;
    display: inline-block;
}

.horizontalMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    text-align: left;
    box-shadow: 0 6px 10px -1px #888888;
    behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
    display: inline-block;
    background-color: white; 
    white-space: nowrap;
}

.horizontalMenu a {
    display: block;
    padding: 0 15px 0 15px; 
    color: black;
    font-size: 16px;
    line-height: 45px;
    text-decoration: none;
    cursor: pointer;
}

.horizontalMenu a:hover{ 
    background-color: #B0B0B0;
}

.horizontalMenu a.active{
    background-color: #6789AE;
}

/* Hide Dropdowns by Default */
.horizontalMenu ul ul {
    display: none;
    position: absolute; 
    top: 45px;
    z-index: 1;
}

/* Display Dropdowns on Hover */
.horizontalMenu ul li:hover > ul {
    display: block;
}

/* First Tier Dropdown */
.horizontalMenu ul ul li {
    float: none;
    display: list-item;
    position: relative;
}

/* Sub-menu options should be compact */
.horizontalMenu ul ul a{
    font-size: 14px;
    line-height: 30px;
}

/* Second, Third and more Tiers */
.horizontalMenu ul ul ul{
    position: absolute;
    left: 100%;
    top: 0;
}

I needed to add a "locking" functionality so that if the user scrolls down past where the menu is, the menu gets locked to the top of the screen and comes along with them. I accomplished this by adding a "fixed" class and applying it dynamically using JS code:

.horizontalMenu.fixed {
    position:fixed;
    top:0;
    display:block;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width:710px;
}

JS code:

$(function(){
    var numScroll = 240; //number of pixels before modifying styles

    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > numScroll) {
            $('.horizontalMenu').addClass('fixed');
        } else {
            $('.horizontalMenu').removeClass('fixed');
        }
    });
});

This works relatively well, except that the width that I hardcoded to 710px seems to differ slightly in different browsers, so I can't seem to find a width that works perfectly for all browsers. The menu in its regular state at the top of the page is centered using an auto width (through code in the containing divs that I did not set up and do not fully understand), and when scrolling down it gets slightly wider in some browsers. Is there any way to set the "fixed" class width to work on an auto width rather than hardcoding it to a specific pixel width so that it will work in all browsers?

I tried to put together a jsfiddle but was not completely successful in setting it up to illustrate my point, but here is a basic idea.

Update for clarity:

For example this fiddle with a hardcoded width of 346px works perfectly for me in Chrome but is slightly off in FF and IE.

I really want to set the width to auto, but when I try that it expands to take up the whole width of the screen, likely due to the "display:block". I don't know enough CSS to be able to set this up right.

Upvotes: 1

Views: 86

Answers (2)

Jai
Jai

Reputation: 74738

Well i would say you need to rethink your problem because that requires your element to be treated as table, so you can make use of display:table and some js calculation to center your element:

The below snippet is the original one which have same menu items.

var numScroll = 20;
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > numScroll) {
    $('.horizontalMenu').addClass('fixed').css('left', function(){
      return ($(window).width()-$(this).width())/2
    });
  } else {
    $('.horizontalMenu').removeClass('fixed').removeAttr('style');
  }
});
.horizontalMenu {
  background-color: white;
  display: table;
  margin: 0 auto;
}

.horizontalMenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 10px -1px #888888;
  behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
  display: table-cell;
  background-color: white;
  white-space: nowrap;
}

.horizontalMenu a {
  display: table-cell;
  padding: 0 15px 0 15px;
  color: black;
  font-size: 16px;
  line-height: 45px;
  text-decoration: none;
  cursor: pointer;
}

.horizontalMenu a:hover {
  background-color: #B0B0B0;
}

.horizontalMenu a.active {
  background-color: #6789AE;
}


/* Hide Dropdowns by Default */

.horizontalMenu ul ul {
  display: none;
  position: absolute;
  top: 45px;
  z-index: 1;
}


/* Display Dropdowns on Hover */

.horizontalMenu ul li:hover > ul {
  display: table;
}


/* First Tier Dropdown */

.horizontalMenu ul ul li {
  float: none;
  display: list-item;
  position: relative;
}


/* Sub-menu options should be compact */

.horizontalMenu ul ul a {
  font-size: 14px;
  line-height: 30px;
}


/* Second, Third and more Tiers	*/

.horizontalMenu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/* If any menu options are added, the width needs to be adjusted */

.horizontalMenu.fixed {
  position: fixed;
  top: 0;
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='horizontalMenu'>
    <ul>
      <li><a>Website Config &#9662;</a>
        <ul>
          <li><a>Include Files</a></li>
        </ul>
      </li>
      <li><a>User Training &#9662;</a>
        <ul>
          <li><a>Upload new webinar &#9656;</a>
            <ul>
              <li><a>Training webinar</a></li>
              <li><a>Some other webinar</a></li>
            </ul>
          </li>
          <li><a>Upload new guide</a></li>
        </ul>
      </li>
      <li><a>Data</a></li>
    </ul>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />END

In the fiddle we have more menu items added and works great.

check the other snippet with more menu items. 

var numScroll = 20;
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > numScroll) {
    $('.horizontalMenu').addClass('fixed').css('left', function(){
      return ($(window).width()-$(this).width())/2
    });
  } else {
    $('.horizontalMenu').removeClass('fixed').removeAttr('style');
  }
});
.horizontalMenu {
  background-color: white;
  display: table;
  margin: 0 auto;
}

.horizontalMenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 10px -1px #888888;
  behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
  display: table-cell;
  background-color: white;
  white-space: nowrap;
}

.horizontalMenu a {
  display: table-cell;
  padding: 0 15px 0 15px;
  color: black;
  font-size: 16px;
  line-height: 45px;
  text-decoration: none;
  cursor: pointer;
}

.horizontalMenu a:hover {
  background-color: #B0B0B0;
}

.horizontalMenu a.active {
  background-color: #6789AE;
}


/* Hide Dropdowns by Default */

.horizontalMenu ul ul {
  display: none;
  position: absolute;
  top: 45px;
  z-index: 1;
}


/* Display Dropdowns on Hover */

.horizontalMenu ul li:hover > ul {
  display: table;
}


/* First Tier Dropdown */

.horizontalMenu ul ul li {
  float: none;
  display: list-item;
  position: relative;
}


/* Sub-menu options should be compact */

.horizontalMenu ul ul a {
  font-size: 14px;
  line-height: 30px;
}


/* Second, Third and more Tiers	*/

.horizontalMenu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/* If any menu options are added, the width needs to be adjusted */

.horizontalMenu.fixed {
  position: fixed;
  top: 0;
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='horizontalMenu'>
    <ul>
      <li><a>Website Config &#9662;</a>
        <ul>
          <li><a>Include Files</a></li>
        </ul>
      </li>
      <li><a>User Training &#9662;</a>
        <ul>
          <li><a>Upload new webinar &#9656;</a>
            <ul>
              <li><a>Training webinar</a></li>
              <li><a>Some other webinar</a></li>
            </ul>
          </li>
          <li><a>Upload new guide</a></li>
        </ul>
      </li>
      <li><a>Data</a></li>
      <li><a>Data2</a></li>
      <li><a>Data3</a></li>
    </ul>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />END

Updated fiddle.

Upvotes: 1

Enjayy
Enjayy

Reputation: 1074

You need to remove the width and remove the right: 0; and left: 0; properties

.horizontalMenu.fixed {
position:fixed;
top:0;
display:block;
margin-right: auto;
margin-left: auto;
}

checkout the fiddle https://jsfiddle.net/kriscoulson/xt3yf0zb/10/

Upvotes: 0

Related Questions