Πέμπτη, 28 Ιουνίου 2012

Cool Blue Drop-Down Μενού

Print and PDF


Γεια σας και πάλι, η σημερινή ανάρτηση είναι αφιερωμένη στον φίλο μας τον DimP, όπου επειδή δεν δούλεψε το προηγούμενο Drop-Menu όπου είχαμε ανεβάσει και επειδή του υποσχέθηκα ότι θα του ανεβάσω μετά τον διαγωνισμό ένα άλλο, έτσι λοιπόν δικό σου φιλέ μου. Πιο αναλυτικά το παρακάτω Gadgetaki είναι ένα πολλή όμορφο Drop-Menu στο οποίο για να βεβαιωθώ ότι όντως θα δουλέψει όπως κάνω και σε πολλά αλλά Gadgets το δοκίμασα στο Demosite μου (όπου είναι φτιαγμένο από ένα απλό πρότυπο) και όπως διαπίστωσα δουλεύει μια χαρά. Το μόνο που έμεινε είναι να το δοκιμάσετε και εσείς τώρα και να μου πείτε την γνώμη σας. (Το Demo όπως πάντα είναι στο τέλος της ανάρτησης).

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


3) Ψάξτε για τον παρακάτω κώδικα (Ctl+F):
]]></b:skin>

4) Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα ακριβώς πάνω από το ]]></b:skin>.
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtAu6UjDEI/AAAAAAAAAJo/bk_C9T7IF54/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
color:#999999;
}
-Αποθηκεύσετε το πρότυπο.


5) Κάντε παλι κλικ στο Σχεδίαση. και επιλέξτε Διάταξη (στα αριστερά της οθόνης σας).
-Πατήστε Προσθηκη Gadget και έπειτα HTML/JavaScript Προσθήκη.

6) Αντιγράψτε και επικολλήστε τον παρακάτω κώδικα μέσα στο πλαίσιο HTML/JavaScript.  
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul></li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul></li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul></div>


Σημιώσεις:

Μπορείτε να αλλάξετε τα κόκκινα γράμματα, τα μπλε γράμματα.

 
Τα
κόκκινα γράμματα είναι οι τίτλοι από τις σελίδες που θέλετε να βάλετε.
Τα
μπλε γράμματα είναι το λινκ/url των αναλόγων τίτλων. 

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




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

 
-Άμα σας αρέσουν οι αναρτήσεις μας παρακαλώ προωθήστε την ιστοσελίδα μας ή πατήστε το κουμπί παρακολούθηση στα δεξιά.

Ευχαριστούμε.



Copyrights: BlogyTricks©   

Πηγη κωδικα:
Blogspot Tutorial

15 σχόλια :

  1. Καταρχήν σε ευχαριστώ πολύ που έγραψες το post και δεν με ξέχασες. Αυτό και μόνο δείχνει ότι είσαι σωστός και σέβεσει αυτούς που σε διαβάζουν. Πάμε τώρα στην εφαρμογή. Ενώ το έκανα και ανοίγουν τα υπομενού, όταν πάω να πατήσω πάνω τους με αφήνει να πατήσω μέχρι και τη δεύτερη γραμμή. Από την τρίτη και κάτω όταν πηγαίνω πάνω το ποντίκι, εξαφανίζονται τα υπομενού (προφανώς επειδή πάλι δεν έχει το αντίστοιχο κενό). Επομένως, ενώ είναι πολύ όμορφο το μενού δεν μου δουλεύει σωστά. Υπάρχει κάποια τροποποίηση που μπορώ να κάνω;;;

    ΑπάντησηΔιαγραφή
  2. Χαίρομαι που σου αρέσει η ανάρτηση μας. Τώρα όσο αναφορά για την λειτουργικότητα αυτου του Gadget μπορώ να σου πω ότι δουλεύει μια χαρά, επειδή κιόλας όπως είπα το δοκίμασα. Μπορείς κιόλας να το δεις στο VideoTutorial μας. Τώρα επειδή με ενδιαφέρει πιο πολλή να δουλεύει σε εσένα θέλω να μου στείλεις το Blog σου με ένα email έτσι ώστε να δω τι μπορώ να κάνω.

    ΑπάντησηΔιαγραφή
  3. http://dokimastikiprovoli.blogspot.gr/
    αυτο ειναι το τεστ blog μου που δοκιμάζω τα πάντα πριν τα βάλω στο κανονικό.

    ΑπάντησηΔιαγραφή
  4. Φιλέ μου το κοίταξα και δεν είδα κανένα πρόβλημα, δουλεύει μια χαρά. Το μόνο πρόβλημα που έχει είναι το χρώμα μπλε που δεν υπάρχει σε κάποια σημεία και αυτό γίνετε επειδή κατά κάποιο περίεργο τρόπο έχει πειραχτεί ο skin κώδικας (το οποίο φτιάχνετε πολύ εύκολα).

    ΑπάντησηΔιαγραφή
  5. Καλησπέρα και πάλι.
    Αν ανοίξεις τα μενού και προσπαθήσεις να πας στο τρίτο υπομενού, τότε δεν πάει(εξαφανίζεται όλο το υπομενού). Πάει και ανοίγει ως το δεύτερο υπομενού, από εκεί και κάτω δεν ανοίγουν τα υπόλοιπα.

    ΑπάντησηΔιαγραφή
  6. Φιλέ μου δεν υπάρχει τρίτο υπομενού. Μάλλον θα μπερδεύτηκες από τις θέσεις τους, αλλά αν κοιτάξεις θα δεις ότι υπομενού υπάρχει μονό στο δεύτερο και το τρίτο.

    ΑπάντησηΔιαγραφή
  7. Λοιπόν. Το κοίταξα και δουλεύει μια χαρα στο google chrome kai στο firefox. ΔΕΝ δουλεύει στον explorer!!!!! Εγώ κατά κύριο λόγο χρησιμοποιώ explorer γι' αυτο δεν μου εφανίζεται....Γιατί συμβαίνει αυτό???Υπάρχει κάποια λύση???

    ΑπάντησηΔιαγραφή
  8. Δεν ξέρω φιλέ μου για αυτό το πρόβλημα που μου λες. Αν και νομίζω ότι δεν λύνεται.

    ΑπάντησηΔιαγραφή
  9. Λέγοντας υπομενού εννοώ τις καρτέλες που ανοίγουν κάθετα(στο δεύτερο και στο τρίτο).

    ΑπάντησηΔιαγραφή
  10. Ναι αυτές εννόησα, αλλά τελικά ήταν άλλο το πρόβλημα από ότι μου είπες.

    ΑπάντησηΔιαγραφή
  11. ok.Πάντως ευχαριστώ πάρα πολύ που ασχολήθηκες με το πρόβλημα μου. Θα είμαι εδώ να παρακολουθώ τις εξελίξεις. Καλή συνέχεια εύχομαι στην πολύ διαφωτιστική προσπάθεια που κάνετε για εμάς.

    ΑπάντησηΔιαγραφή
  12. Τίποτα φιλέ μου. Χαίρομαι που μπόρεσα να σε βοηθήσω.

    ΑπάντησηΔιαγραφή
  13. Μπραβο ρε παιδια. υπαρχει κατι που να εχει μονο μενου χωρις κατηγοριες;;

    ΑπάντησηΔιαγραφή
  14. Ρίξε μια ματιά σε αυτό φιλέ μου: http://www.blogytricks.info/2011/11/navigation-menu-with-css.html

    ΑπάντησηΔιαγραφή
  15. Εγώ βρήκα ένα παρόμοιο με μία υποκατηγορία υπομενού πολύ απλό και παίζει παντού ρίχτε του μια ματιά. ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΜΕ ΥΠΟΜΕΝΟΥ ΑΠΛΟ ΣΑΝ GADGET Νο 4

    ΑπάντησηΔιαγραφή