Quick Navigation?

Hello How Do I Do The Quick Navigation Thing ? Like This Forum? (Click Me Please )

The Floating One At The Left Side?



----Version----
----PunBB----


Thanks In ADvance.

Hi,

Add this inside the Homepage content area: ACP >> Display >> Homepage >> Generalities >> Homepage content:

Code:

<div class="quicknavi">
<img src="http://i80.servimg.com/u/f80/17/22/01/88/untitl10.png">
<br><br>
<style type="text/css">
#menu2{ width: 150px; }
#menu2 a{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; text-align: right; padding: 1px; display: block; width: 100%; color: #897688; background: #transp; margin: 2px; text-decoration: none; transition-duration: 0.30s; -moz-transition-duration: 0.30s; -webkit-transition-duration: 0.30s; -o-transition-duration: 0.30s; }

#menu2 a{ /*non IE rule*/ width: auto; }
#menu2 a:hover{ color #FEF9CF; text-transform: uppercase; text-align: center; border-bottom: 3px solid #fef9cf !important; color: #fef9cf; opacity: 1 !important;}
</style><div id="menu2">
<a href="yoururl.com"><b>Title Goes Here</b></a>
<a href="yoururl.com"><b>Title Goes Here</b></a>
<a href="yoururl.com"><b>Title Goes Here</b></a>
<a href="yoururl.com"><b>Title Goes Here</b></a>
<a href="yoururl.com"><b>Title Goes Here</b></a>
<a href="yoururl.com"><b>Title Goes Here</b></a>
</div></div>

Replace the yoururl.com with yours and as well as the title goes here with yours.


Add this into your CSS:

Code:

.quicknavi:hover {
left: 0;
position: fixed;
top: 300px;
}
.quicknavi {
-moz-transition: all .5s;
-o-transition: all .5s;
-webkit-transition: all .5s;
background-color: #000;
border: 1px solid #fff;
border-radius: 20px;
left: -100px;
padding: 15px;
position: fixed;
top: 300px;
transition: all .5s;
}

Regards,
Sir Chivas.

SOlved You Saved My Day

No problem, have a nice day.

Topic Solved & Locked