How to install the CSS Dock Menu

by  on August 2, 2011
Articles


How to install the CSS Dock Menu

How to install the CSS Dock Menu  - This CSS dock menu kindly coded by N Design Studio

This is a detailed  step by step tut – for the non tech savvy -install the CSS Dock Menu – so we can all have this dock .

thanks to  ndesign studio the CSS Dock Menu brings some mac flavor to our web designs. The css is easy enough to install just there is no documentation that goes in to detail and I’ve seen alot of people asking around even willing to pay for others to install this simple CSS menu. Hopefully this will be alot of help to many of you .

So to start with download the files that we need . This contains everything we need to make this CSS menu work on our site.

The next step is to unzip these files to a folder – this is so that the FTP works – if you’ve ever wondered why the files won’t transfer from a zip its because you have to unzip them before they transfer. The FTP is very easy – I think alot of people find this part puts them off – The FTP is simply a file structure just like on your machine – except its on your server, out in whichever hosts country you have it – mines in Texas – which is just another computer just like your own personal computer but I digress -

Next if you havent done so already get Filezilla its free and does FTP-ing very nicely – the setup is easy enough; you just want put in your blogs url and cpanel password set to normal login and port 21 – search you tube for a tut there are plenty around.

So now – we are ready to move the files to the website – After logging onto your server – find public html this is the main directory for your server including all add on domains – if you dont see your domain as a folder thats because your main url directory is the public HTML folder itself – I use a sub domain -trades-design.inspireify.com/   so find the sub folder / directory called trades-design – or whatever the add on or sub domain is called.The folder and  files contain the js plugin and js itself – with the html already there.

Simply drag all the files into that directory – the main one with wp-config.php in it . Thats it – Now simply put “/css-dock.html ” behind the sub/ add on domain in your browser like this http://trades-design.inspireify.com/css-dock.html and thats it – if this doesn’t work try right clicking and  copying the file css-dock.htlm URL and paste into your browser use your ftp login [cpanel] to view it – if you put the files on the directory correctly the only thing it can be is the way you typed the url – which point to the css dock menu  - it should be like this your domain ie : http://digitalartempire.com/     and after the place where the dock is on your server – from your ftp like this image:

 

to alter the links where the menu buttons link to and images for the dock and also the name of the hover text  simply download the html file css-dock.html  and edit the code with notepad – or press ctrl U  when at your CSS dock url ie for me its –  http://trades-design.inspireify.com/css-dock.html  to get to the source code and copy and paste it to a notepad after editing  save it as css-dock.html this is optional it still works as an example

to edit the links – find this code – after <!–top dock –> <div id=”dock”>  for the top menu and <!–bottom dock –> for the lower menu

for the link  insert where it links to  here #  between the quotations -”#”

for the image upload the image to the images folder ( for css dock in your main directory not for your theme) change the name of the image you upload to its respective place –  or alter the img source name ie  “images/home.png”

For the hover text change the words between the <span> </span> tags – the alt tags only changed the alt text

Find and edit the red

<!–top dock –> <div id=”dock”>

<a class=”dock-item” href=”#“><img src=”images/home.png” alt=”home” /><span>Home</span></a>
<a class=”dock-item” href=”#”><img src=”images/email.png” alt=”contact” /><span>Contact</span></a>
<a class=”dock-item” href=”#”><img src=”images/portfolio.png” alt=”portfolio” /><span>Portfolio</span></a>
<a class=”dock-item” href=”#”><img src=”images/music.png” alt=”music” /><span>Music</span></a>
<a class=”dock-item” href=”#”><img src=”images/video.png” alt=”video” /><span>Video</span></a>
<a class=”dock-item” href=”#”><img src=”images/history.png” alt=”history” /><span>History</span></a>
<a class=”dock-item” href=”#”><img src=”images/calendar.png” alt=”calendar” /><span>Calendar</span></a>
<a class=”dock-item” href=”#”><img src=”images/rss.png” alt=”rss” /><span>RSS</span></a>
<a class=”dock-item” href=”#”><img src=”images/rss.png” alt=”rss” /><span>RSS</span></a>
<a class=”dock-item” href=”#”><img src=”images/rss2.png” alt=”rss” /><span>RSS2</span></a>
Find and edit the red
<!–bottom dock –>
<a class=”dock-item2″ href=”#“><span>Home</span><img src=”images/home.png” alt=”home” /></a>
<a class=”dock-item2″ href=”#”><span>Contact</span><img src=”images/email.png” alt=”contact” /></a>
<a class=”dock-item2″ href=”#”><span>Portfolio</span><img src=”images/portfolio.png” alt=”portfolio” /></a>
<a class=”dock-item2″ href=”#”><span>Music</span><img src=”images/music.png” alt=”music” /></a>
<a class=”dock-item2″ href=”#”><span>Video</span><img src=”images/video.png” alt=”video” /></a>
<a class=”dock-item2″ href=”#”><span>History</span><img src=”images/history.png” alt=”history” /></a>
<a class=”dock-item2″ href=”#”><span>Calendar</span><img src=”images/calendar.png” alt=”calendar” /></a>
<a class=”dock-item2″ href=”#”><span>Links</span><img src=”images/link.png” alt=”links” /></a>
<a class=”dock-item2″ href=”#”><span>RSS</span><img src=”images/rss.png” alt=”rss” /></a>
<a class=”dock-item2″ href=”#”><span>RSS2</span><img src=”images/rss2.png” alt=”rss” /></a>

 

afterwards all the code must be saved for it to work 
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>CSS Dock Menu</title>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/interface.js”></script>

<link href=”style.css” rel=”stylesheet” type=”text/css” />

<!–[if lt IE 7]>
<style type=”text/css”>
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

</head>
<body>
<!–top dock –>
<div class=”dock” id=”dock”>
<div class=”dock-container”>
<a class=”dock-item” href=”#”><img src=”images/home.png” alt=”home” /><span>Home</span></a>
<a class=”dock-item” href=”#”><img src=”images/email.png” alt=”contact” /><span>Contact</span></a>
<a class=”dock-item” href=”#”><img src=”images/portfolio.png” alt=”portfolio” /><span>Portfolio</span></a>
<a class=”dock-item” href=”#”><img src=”images/music.png” alt=”music” /><span>Music</span></a>
<a class=”dock-item” href=”#”><img src=”images/video.png” alt=”video” /><span>Video</span></a>
<a class=”dock-item” href=”#”><img src=”images/history.png” alt=”history” /><span>History</span></a>
<a class=”dock-item” href=”#”><img src=”images/calendar.png” alt=”calendar” /><span>Calendar</span></a>
<a class=”dock-item” href=”#”><img src=”images/rss.png” alt=”rss” /><span>RSS</span></a>
<a class=”dock-item” href=”#”><img src=”images/rss.png” alt=”rss” /><span>RSS</span></a>
<a class=”dock-item” href=”#”><img src=”images/rss2.png” alt=”rss” /><span>RSS2</span></a>
</div>
</div>

<!–bottom dock –>
<div class=”dock” id=”dock2″>
<div class=”dock-container2″>
<a class=”dock-item2″ href=”#”><span>Home</span><img src=”images/home.png” alt=”home” /></a>
<a class=”dock-item2″ href=”#”><span>Contact</span><img src=”images/email.png” alt=”contact” /></a>
<a class=”dock-item2″ href=”#”><span>Portfolio</span><img src=”images/portfolio.png” alt=”portfolio” /></a>
<a class=”dock-item2″ href=”#”><span>Music</span><img src=”images/music.png” alt=”music” /></a>
<a class=”dock-item2″ href=”#”><span>Video</span><img src=”images/video.png” alt=”video” /></a>
<a class=”dock-item2″ href=”#”><span>History</span><img src=”images/history.png” alt=”history” /></a>
<a class=”dock-item2″ href=”#”><span>Calendar</span><img src=”images/calendar.png” alt=”calendar” /></a>
<a class=”dock-item2″ href=”#”><span>Links</span><img src=”images/link.png” alt=”links” /></a>
<a class=”dock-item2″ href=”#”><span>RSS</span><img src=”images/rss.png” alt=”rss” /></a>
<a class=”dock-item2″ href=”#”><span>RSS2</span><img src=”images/rss2.png” alt=”rss” /></a>
</div>
</div>

<!–dock menu JS options –>
<script type=”text/javascript”>

$(document).ready(
function()
{
$(‘#dock’).Fisheye(
{
maxWidth: 50,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 40,
proximity: 90,
halign : ‘center’
}
)
$(‘#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);

</script>
</body>
</html>

hope this tutorial helped if you liked it promote it everywhere you can – link to it on all your fav forums and via social media inc twitter Facebook and even the other ones ;0


What's your reaction?
Angry
0%
Happy
0%
Wink
0%
Thumbs Up
0%
Cheers
0%
Lol
0%
Sad
0%
Devil
0%
comments
Leave a reply

Leave a Response

EXCLUSIVE!
 
Photoshop CS6 Shortcuts, tips and tricks
July 17, 2014
Tutorials
READ STORY
The Latest
RSS-Subscribe-Now w white

168 Extraordinary Photo Manipulations That Will Blow You Away

cinema_m

88 Fantastically Creative and Brilliant Logos

featured image

71 Impressive Nature Inspired Wallpapers

20-Absolutely-Stunning-Examples-of-Night-Photography

20 Absolutely Stunning Examples of Night Photography

b70-6739

35 Stunning 50′s Posters

1front-logo-resioursec

The Ultimate Logo Design Tutorials and Resources Roundup

da_vinci_vitruve_luc_viatour1

30 Inspirational Quotes on Design

Photoshop-CS6_tricks.jpg

Photoshop CS6 Shortcuts, tips and tricks

game_develop

Develop 2D games without Programming

rain_tool

Rain Tool v.1 for Autodesk Maya

115207e3f04dc4abb0d384ddead6a241adc4f1

Kempeli Rebranding

44019566d82d0fb932247341ab299c85ca89b1

ESPN Sportscenter 2009 ReBrand

797062c59994e9472a392901dae3027d14d91e

Adrià Gómez Logo Design

Surge Plonia T-shirt design

Surge Polonia T Shirt Designs

Go Voice Branding

Go Voice Branding

Jose SImon Selected logos and logotypes

Jose SImon Selected logos and logotypes

The Barbershop Branding

The Barbershop Branding

Fonts by Google Fonts. Theme Edited By Mrunal Patel.