jQuery -水平+垂直肚脐

Question

我正在努力实现以下蓝图的结果：

​

​

不幸的是，我对JavaScript和jQuery非常陌生，所以我需要一些帮助。

这个想法是垂直导航/滑块，

跟着你的光标，

当在水平导航杆上盘旋时，

显示子链接，就像下拉菜单。

我不是要你帮我做所有的工作，但也许给我一些建议，告诉我如何开始工作？

HTML和CSS的实验验证

代码：

HTML

  <section class="container">
  <div class="fs-nav-vr">
  <ul>
  <li>Linkki</li>
  <li>Hinkki</li>
  <li>Sinkki</li>
  </div>
  <div class="pusher"></div>
   <section class="sc-nav">
<div class="fs-nav">
<nav>
    <div onclick=" window.location = 'http://google.com'">
        <a >Linkki</a>
    </div><div>
        <a href="#">Hinkki</a>
    </div><div>
        <a href="#">Sinkki</a>
    </div>
</nav>
</div>

  </section>

</div>

CSS

.fs-nav-vr {
    display: block;
    top: 0;
    height: 100%;
    width: 10%;
    padding: 0;
    margin: 0;
    opacity: 0.6;
    z-index: 2;
    left: 15%;
    background: red;
    position: absolute;
}
.fs-nav {
    height: 15%;
    display: block;
    width: 100%;
    top: 65%;
    padding: 0;
    margin: 0;
    color: relative;
    text-align:center;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.17, rgb(61, 61, 61)), color-stop(0.66, rgb(87, 84, 87)));
    background-image: -o-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
    background-image: -moz-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
    background-image: -webkit-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
    background-image: -ms-linear-gradient(bottom, rgb(61, 61, 61) 17%, rgb(87, 84, 87) 66%);
    background-image: linear-gradient(to bottom, rgb(61, 61, 61, 0.7) 17%, rgb(87, 84, 87) 66%);
    opacity: 0.8;
    overflow: hidden;
}
.fs-nav nav div {
    display: inline-block;
    text-align:center;
    cursor: pointer;
    border: solid 1px gray;
    padding: 2%;
    margin: 0;
    font-size: 40px;
    background-color: #999999;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

Answer 1

这对开始和理解你需要做的事情是有好处的。

HTML

<div class="h-nav"> 

<div class="vert-nav-container">
<a class="link1" href=""> option 1 </a>
<a class="link2" href=""> option 2 </a>
<a class="link3" href=""> option 3 </a>

    <div class="v-nav">
        <ul style="margin-top:40px">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        <ul>    
    </div>

</div>

​

jQuery

$(".link1").mouseenter(function(){
     $(".v-nav").css({'left':'0px'})
});

$(".link2").mouseenter(function(){
     $(".v-nav").css({'left':'90px'})
});

$(".link3").mouseenter(function(){
    $(".v-nav").css({'left':'180px'})
});

对于每个有鼠标事件的链接，您可以在其中添加新的内容，例如，为每个选项显示不同的链接集。

http://jsfiddle.net/4qdyK/36/