Προσθέστε Κινούμενο πλευρικό Μενού - Sliding Side Menu. ( Νο 4 )

Εδώ θα σας δείξουμε πως θα μπορέσετε να φτιάξετε ένα λειτουργικό κινούμενο Μενού στην αριστερή πλευρά της σελίδας σας, το οποίο μπορείτε να προσθέσετε όλους τους συνδέσμους σας ή κάποιους που θέλετε να ομαδοποιήσετε & να προβάλετε στους επισκέπτες σας.

Λοιπόν ας ξεκινήσουμε....



Καταρχήν θα πρέπει να κατεβάσετε τα 2 scripts από εδώ.

ssm.js and ssmItems.js

Αφού κατεβάσετε το ζιπαρισμένο αρχείο στην επιφάνεια εργασείας σας, θα πάτε & θα ανοίξετε με το note/text pad το script ssmItems.js

θα δείτε το παρακάτω κώδικα...

<!--
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Dynamic Drive", "http://www.dynamicdrive.com", ""]
ssmItems[2]=["What's New", "http://www.dynamicdrive.com/new.htm",""]
ssmItems[3]=["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""]
ssmItems[4]=["Message Forum", "http://www.codingforums.com", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.dynamicdrive.com/link.htm", ""]

ssmItems[7]=["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "http://www.dynamicdrive.com/contact.htm", "",1]

ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]
ssmItems[11]=["Freewarejava", "http://www.freewarejava.com", ""]
ssmItems[12]=["Coding Forums", "http://www.codingforums.com", ""]

buildMenu();

//-->

Μια μικρή επεξήγηση του τι έχουμε εδώ....

Στο πάνω σημείο έχουμε διαστάσεις & χρώματα & στο κάτω μέρος είναι οι ετικέτες & οι σύνδεσμοι.

Τώρα το επόμενο βήμα σας είναι:

Τα χρώμματα που μας δίνει ο κατασκευαστής του script είναι...



αν θέλετε να τα αλλάξετε θα κοιτάξετε τα παρακάτω σημεία & θα βάλετε όποια εσείς θέλετε...

hdrFontColor="white"
hdrBGColor="#170088"
linkOverBGColor="#FFFF99"
barBGColor="#444444"

Τώρα θα πάτε στο κάτω μέρος & εκει που έχει το Menu το αφήνουμε ως έχει.
Πάμε στην δεύτερη γραμμή που έχει το "Dynamic Drive", "http://www.dynamicdrive.com"
Θα αλλάξετε το Dynamic Drive με την δική σας ετικέτα & το http://www.dynamicdrive.com με τον αντίστοιχο σύνδεσμό σας.
Έτσι θα κάνετε & στα επόμενα μέχρι να τα αντικαταστήσετε με τα δικά σας στοιχεία (ετικέτες & συνδέσμους)

Μόλις τελειώσετε το κάνετε αποθήκευση.

Το επόμενο βήμα είναι να τα ανεβάσετε & τα δύο scripts σε κάποιον server. (δειτε εδώ)

Τώρα πάμε στο ιστολόγιο...

Κι αφού κρατήσετε ένα backup το template σας καλού-κακού....

θα μπείτε στο Πανόπτη σας & μετά >>> Διάταξη >>> Επεξεργασία HTML και θα κάνετε αναζήτηση με το Ctrl + F για το.....

</head>

Μόλις το βρείτε & πριν από το κλείσιμο του </head>
θα προσθέσετε τον παρακάτω κώδικα αφού έχετε προσθέσει τους συνδέσμους του server.

<!--Sliding-Side-Menu-STARTS-->
<STYLE>
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>

<SCRIPT SRC='http://..........Your link....../ssm.js' language='JavaScript1.2'>

//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100&#39;s more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC='http://..........Your link....../ssmItems.js' language='JavaScript1.2'/>
<!--Sliding-Side-Menu-STOPS-http://loneeagle110.blogspot.com-->

Τέλος πατάτε ΑΠΟΘΗΚΕΥΣΗ ΠΡΟΤΥΠΟΥ κι είστε ΟΚ!!

Για σχέδια σε Οριζόντια Μενού δείτε τα.....

Οριζόντιο Μενού Νο 1
Οριζόντιο Μενού Νο 2
Οριζόντιο Μενού Νο 3
Οριζόντιο Μενού Νο 4
Οριζόντιο Μενού Νο 5
Οριζόντιο Μενού Νο 6
Οριζόντιο Μενού Νο 7
Οριζόντιο Μενού Νο 8
Οριζόντιο Μενού Νο 9
Οριζόντιο Μενού Νο 10
Οριζόντιο Μενού Νο 11
Οριζόντιο Μενού Νο 12
Οριζόντιο Μενού Νο 13
Οριζόντιο Μενού Νο 14
Οριζόντιο Μενού Νο 15
Οριζόντιο Μενού Νο 16
Οριζόντιο Μενού Νο 17
Οριζόντιο Μενού Νο 18
Οριζόντιο Μενού Νο 19
Οριζόντιο Μενού Νο 20
Οριζόντιο Μενού Νο 21
Οριζόντιο Μενού Νο 22
Οριζόντιο Μενού Νο 23
Οριζόντιο Μενού Νο 24
Οριζόντιο Μενού Νο 25
Οριζόντιο Μενού Νο 26
Οριζόντιο Μενού Νο 27
Οριζόντιο Μενού Νο 28
Οριζόντιο Μενού Νο 29
Οριζόντιο Μενού Νο 30
Οριζόντιο Μενού Νο 31
Οριζόντιο Μενού Νο 32
Οριζόντιο Μενού Νο 33
Οριζόντιο Μενού Νο 34
Οριζόντιο Μενού Νο 35
Οριζόντιο Μενού Νο 36
Οριζόντιο Μενού Νο 37
Οριζόντιο Μενού Νο 38
Οριζόντιο Μενού Νο 39
Οριζόντιο Μενού Νο 40
Οριζόντιο Μενού Νο 41
Οριζόντιο Μενού Νο 42
Οριζόντιο Μενού Νο 43
Οριζόντιο Μενού Νο 44
Οριζόντιο Μενού Νο 45
Οριζόντιο Μενού Νο 46
Οριζόντιο Μενού Νο 47
Οριζόντιο Μενού Νο 48
Οριζόντιο Μενού Νο 51
Οριζόντιο Μενού Νο 52

Για σχέδια σε Κάθετα μενού δείτε τα....

Κάθετο Μενού Νο 1
Κάθετο Μενού Νο 2
Κάθετο Μενού Νο 3
Κάθετο Μενού Νο 4
Κάθετο Μενού Νο 5
Κάθετο Μενού Νο 6
Κάθετο Μενού Νο 7
Κάθετο Μενού Νο 8
Κάθετο Μενού Νο 9
Κάθετο Μενού Νο 11
Κάθετο Μενού Νο 12
Κάθετο Μενού Νο 13
Κάθετο Μενού Νο 14
Κάθετο Μενού Νο 15
Κάθετο Μενού Νο 16
Κάθετο Μενού Νο 17
Κάθετο Μενού Νο 18
Κάθετο Μενού Νο 20
Κάθετο Μενού Νο 21
Κάθετο Μενού Νο 22
Κάθετο Μενού Νο 23
Κάθετο Μενού No 26
Κάθετο Μενού Νο 30

Κι έρχονται κι άλλα!!!

ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!