The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Quick Navigation?

2 posters

Go down

Solved Quick Navigation?

Post by refresh102 May 23rd 2013, 5:53 am

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

The Floating One At The Left Side?



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


Thanks In ADvance.
avatar
refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

Solved Re: Quick Navigation?

Post by Sir Chivas™ May 23rd 2013, 4:14 pm

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.
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Quick Navigation?

Post by refresh102 May 23rd 2013, 4:28 pm

SOlved You Saved My Day Wink
avatar
refresh102
Forumember

Male Posts : 181
Reputation : 4
Language : English,Japanese

Back to top Go down

Solved Re: Quick Navigation?

Post by Sir Chivas™ May 23rd 2013, 4:29 pm

No problem, have a nice day. bye

Topic Solved & Locked
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum