I'm new to JavaScript and jQuery, and I'm looking to create a vertical nav/slider that follows the cursor when hovering over horizontal navbars links to reveal sub-links, essentially creating a dropdown menu effect.
While I don't expect anyone to do the entire job for me, I would appreciate some tips on how to get started.
Experimental Fiddle of HTML and CSS
CODE:
HTML
<section class="container">
<div class="fs-nav-vr">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="pusher"></div>
<section class="sc-nav">
<div class="fs-nav">
<nav>
<div onclick=" window.location = 'http://google.com'">
<a>Link 1</a>
</div>
<div>
<a href="#">Link 2</a>
</div>
<div>
<a href="#">Link 3</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: linear-gradient(to bottom, rgba(61, 61, 61, 0.7) 17%, rgba(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;
transition: background-color 0.2s ease-in-out;
}