Navigation Menu With CSS

Επειδη ειδα οτι εχω να βαλω οριζοντιο μενου εδω και πολλη καιρο ειπα σημερα μιας και βρηκα και ενα ωραιο να σας το δειξω και ειμαι σιγουρος θα σας αρεσει παρα πολλη! Το μενου αυτο ειναι ευκολο σε επεξεγασια με οχι και παρα πολλη κωδικα και χωρις καθολου εικονες, δηλαδη αλλαζει μονο με χρωματα. (Το Demo ειναι στο τελος της αναρτησης)

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.
2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

4) Παμε τωρα να ψαξουμε τον παρακατω κωδικα(Ctl+F):

</b:skin>

5) Και επικολουμε ακριβως απο πανω τον παρακατω κωδικα:

/*Sample Navigation Bar*/
nav.horizontal{
}
nav.horizontal h3{
padding-bottom:20px;
}
nav.horizontal ul{
height:50px;
background-image:-moz-linear-gradient(top, #93C204, #608009);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px; border-radius: 8px;
border:1px solid #608009;
box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
nav.horizontal ul li{
list-style:none;
display:inline;
float:left;
}
nav.horizontal ul li a{
display:block;
height:28px;
margin:2px 6px 2px 6px;
padding:15px 20px 0px 20px;
font-size:12px;
font-weight:bold;
color:#FFF;
text-transform:uppercase;
text-decoration:none;
border:1px solid transparent;
background-image:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
nav.horizontal ul li a:hover{
background-image:-moz-linear-gradient(top, #161616, #2B3615);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px; border-radius: 10px;
border:1px solid #A3D804;
box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
}

-Αποθηκευση Προτυπου

6) Και τωρα παμε στα Στοιχεια σελιδας-Προσθηκη Gadget-Javascript/HTML και προσθετουμε τον παρακατω κωδικα:

<nav class="horizontal">
        <ul>
            <li><a href="#">Αρχική Σελίδα</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blogger Tips</a></li>
            <li><a href="#">Blogger Tricks</a></li>
            <li><a href="#">Widgets</a></li>
            <li><a href="#">BlogyTricks</a></li>
        </ul>
    </nav>

Σημιωσεις

Απλα αλλαζετε τα παραπανω κοκκινα γραμματα με τα δικα σας χρωμαα και τα λινκ σας.

- Και τελιωσετε πολλη απλα και ευκολα!

- Για το Demo ειναι το παρακατω βιντεο:

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.

  Ευχαριστω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: paulsantosh