CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sean James
Sean James

Reputation: 47

auto showing and hiding navigation bar

Hi I'm trying to implement a auto show and hide navigation menu. I'm not sure how I would implement this idea. The idea I'm wanting is so the navbar slips away out of site above the website and when the cursor hovers over the top the nav bar appears. (A better example is (if you own a Mac) the idea comes from the Dock when auto hidden).

Would I use a .CSS transition or a JQuery/Javascript to implement this.

Heres the navbar I'm working with, 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; 
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: #a137a7;
    font-family:'Source Sans Pro', sans-serif;
    opacity: .8; 
 
 
}

li {
    float: left;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family:'Source Sans Pro', sans-serif;
}

/* Hover color */
li a:hover {
    background-color: #732878;
}

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.70em 0.75em;
  background: #000;
  font-family:'Source Sans Pro', sans-serif;
  top: 490px;
  border-top: 1px solid #000;
  opacity: .7; 
}
<nav>
        
        <ul>
    
        
         <li><a href="/"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
           
         <li><a href=/""a target="_blank"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
       
       <li><a href="/"><img class="blog"       
       src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>

<li><a href="/" onclick="window.open(this.href, 'mywin', 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li> 
       
  
  <li style="float:right"><a href="/"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
       
         <li style="float:right"><a href="/"><img class="img-responsive2"  src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></a></li>
       
        <li style="float:right"><a href="/"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png"></a></li> 
       
    <li style="float:right"><a href="/""a target="_blank"><img class="img-responsive2"       
       src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
       
      
        

</ul>
        </nav>
        <body>

Upvotes: 2

Views: 3385

Answers (3)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

I would use the nav to slide up and down. See my code:

I've added a red border to the nav, so you can see it (for demo).

$(function() {
  $('.hover').on('mouseenter mouseleave', function() {
    $('nav').toggleClass('toggleNav');
  });
});
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;  
  border: 1px solid red;
  height: 175px;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
nav:hover, nav.toggleNav {
  top: 0px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a137a7;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .8;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */

li a:hover {
  background-color: #732878;
}
.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.70em 0.75em;
  background: #000;
  font-family: 'Source Sans Pro', sans-serif;
  top: 490px;
  border-top: 1px solid #000;
  opacity: .7;
}
.hover {
  width: 50px;
  height: 50px;
  background: lightblue;
  margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>

  <ul>
    <li>
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" target="_blank">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
      </a>
    </li>

    <li>
      <a href="/">
        <img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" onclick="window.open(this.href, 'mywin', 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
      </a>
    </li>


    <li style="float:right">
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
      </a>
    </li>

    <li style="float:right">
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
      </a>
    </li>

    <li style="float:right">
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
      </a>
    </li>

    <li style="float:right">
      <a href="/" target="_blank ">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
      </a>
    </li>



    /
  </ul>
</nav>

<div class="hover">Hover here</div>

Upvotes: 2

Sean James
Sean James

Reputation: 47

* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;  
  border: 1px solid red;
  height: 175px;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
nav:hover {
  top: 0px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a137a7;
  font-family: 'Source Sans Pro', sans-serif;
  opacity: .8;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */

li a:hover {
  background-color: #732878;
}
.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.70em 0.75em;
  background: #000;
  font-family: 'Source Sans Pro', sans-serif;
  top: 490px;
  border-top: 1px solid #000;
  opacity: .7;
}
<nav>

  <ul>
    <li>
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" target="_blank">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
      </a>
    </li>

    <li>
      <a href="/">
        <img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" onclick="window.open(this.href, 'mywin', 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
      </a>
    </li>


    <li style="float:right">
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
      </a>
    </li>

    <li style="float:right">
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
      </a>
    </li>

    <li style="float:right">
      <a href="/">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
      </a>
    </li>

    <li style="float:right">
      <a href="/" target="_blank ">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
      </a>
    </li>



    /
  </ul>
</nav>

<body>

Upvotes: 0

S.R
S.R

Reputation: 84

This Is An Example Of Your Requirement Please Try Once 

function myFunction(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
  if(y<=50){
   document.getElementById("navBar").style.display = 'block';
  }
  else{
  document.getElementById("navBar").style.display = 'none';
  }
}

function clearCoor() {
    document.getElementById("demo").innerHTML = "";
}
div {
    width: 100%;
    height: 300px;
    border: 1px solid black;
}
.nav{
  width:100%;
  height:50px;
  background:#00ffff;
  display:none;
  }
<div onmousemove="myFunction(event)" onmouseout="clearCoor()">
<div class="nav" id="navBar"></div>

</div>
<p id="demo"></p>

Upvotes: 0

Related Questions