Question

您好我正在尝试实施自动播放并隐藏导航菜单。我不确定如何实现这个想法。我想要的想法是导航栏从网站上方的网站上滑落，当光标悬停在顶部时，导航栏出现。（一个更好的例子是（如果你拥有一台Mac）这个想法来自Dock时自动隐藏）。

我是否会使用.CSS转换或JQuery / Javascript来实现此目的。

继承我正在使用的导航栏，

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>

Answer 1

我会使用nav向上和向下滑动。看我的代码：

我在导航中添加了红色边框，因此您可以看到它（用于演示）。

＆＃13;

$(function() {
  $('.hover').on('mouseenter mouseleave', function() {
    $('nav').toggleClass('toggleNav');
  });
});

＆＃13;

* { 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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是您需求的一个示例请尝试一次

＆＃13;

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 = "";
}

＆＃13;

div {
    width: 100%;
    height: 300px;
    border: 1px solid black;
}
.nav{
  width:100%;
  height:50px;
  background:#00ffff;
  display:none;
  }

＆＃13;

<div onmousemove="myFunction(event)" onmouseout="clearCoor()">
<div class="nav" id="navBar"></div>

</div>
<p id="demo"></p>

＆＃13;

Answer 3

* { 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>

自动显示和隐藏导航栏

3 个答案: