jQuery-水平+垂直导航栏

Question

I'm trying to achieve the result of the following blueprints:

Sadly, I'm very new to JavaScript and jQuery, so I'd need some help.

The idea is that the vertical nav/slider,
follows your cursor,
when hovering over the horizontal navbars links,
revealing sub-links, like a dropdown menu.

I'm not asking you to do the whole job for me, but maybe give me a few tips and tell me how to get started?

Experimental Fiddle of HTML and CSS

CODE:

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

This should be good for start and understanding what you need to do

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

For every link you have mouse event, you can add new things there like for example showing different sets of links for every option.

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