Hello! This is my first post, and so i'm guessing you probably will think i'm just here for answers.. but I do plan on becoming active here! Anyways I already designed a navigation bar for my site via Photoshop, but I don't know how to turn it into a working HTML/CSS/JavaScript & jQuery code to make it do what I want it to do.

 

Here is my idea:

 

I want it to stay to the right of the screen at all times. Even when scrolling. I believe that's the position: fixed; CSS code.

[spoiler=Concept]

What it will look like by default:

When Hovered Over:

 

Selection When Hovered Over:

 

 

 

Any tips will do!

 

 

 

Hi mate,

 

Not posted for ages been settling into hk, something along these lines should surfice, u will have to expand the code.

 

The HTML

 

<div class="navigation fixed">
	<a id="logo" href="/"><span class="icon-full"></span></a>
    <!-- MAIN NAV -->
 	<ul class="nav_main">
	<li><a class="home" href="#">link</a></li>
        <li><a class="about" href="#">link</a></li>
        <li><a class="contact" href="#">link</a></li>
 	</ul>
    <!-- SOCIAL SECTION -->
    <ul class="nav_social">
	<li><a class="facebook" href="#">link</a></li>
        <li><a class="twitter" href="#">link</a></li>
        <li><a class="google" href="#">link</a></li>
    </ul>
</div>

You will need to assign the icons for each link via css including the logo and all social links:

.home {
    background: ('../images/home-sprite.png') no-repeat center center;
    height:50px;
    width:50px;
    display:block;
    overflow:Hidden;
    background-size:100%
    background-position:0 0;
}
.home:hover {
	/* This move the background up 50px */
	background-position:0 -50px;
}

 

to show the content on hover you will need to something like this

/* Content u want to hide by default */
.content {
     display:none;
}
/* show hidden content on navigation bar :hover */
.navigation:hover > .content {
    display:block;
}

You can assign the logo image to the span element inside #logo, by default set it to display:none; and just include it in the above code: .navigation:hover > span.icon-full { display:block }

 

these are the basics to get your navigation working

 

EDIT: i forgot to show how to fix to the right..

 

.fixed {
position:fixed;
right:0;
top:0;
bottom:0;
width:100px;
z-index:999
}

I would use a css fixed position and then just use some jquery .mouseover and .animate for the hover. Hope this helps

Edited September 16, 201313 yr by 4li4s