2

Aug, 2011

How to install the CSS Dock Menu

By: | Tags: , , , , , , | Comments: 2


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


Comments

2 thoughts on “How to install the CSS Dock Menu

Leave a Reply