ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Σάββατο, 23 Νοεμβρίου 2013

Ο ΣΚΕΛΕΤΟΣ ΜΙΑΣ HTML5 ΣΕΛΙΔΑΣ


 <html> Ορίζουμε τον κώδικα. Στο <head>  ορίζουμε το τίτλο της ιστοσελίδας. Στην συνέχεια πάμε στο ορατό μέρος της  στο <body>,   ορίζουμε μια Επικεφαλιδα και αμέσως την μπάρα με το μενού <nav> .  <article>  γράφουμε το κείμενο μας.  <aside> τα social media  για την προώθηση της.  και τέλος το φούτερ <footer>  μια ανασκόπηση και λίγα λόγιαα για τον δημιουργό.
Ετσι περιλεπτικα εχουμε:
 
<html>
<head>
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
 
 
Πιο αναλυτικά βλέπουμε πιο κάτω
 
 
<!DOCTYPE HTML>
------------------------------------------------------------------------------------------------------------
<html>
<head>
  <title>............</title>
</head>

---------------------------------------------------------------------------------------------------------------
<body>
<header>
 <h1>Η HTML5 ΣΕΛΙΔΑ ΜΟΥ</h1>
 <h2>Ο σκελετος μιας HTML5 Ιστοσελιδας</h2>
</header>

------------------------------------------------------------------------------------------------------------------
<nav>
 <ul>
  <li><a href="#">Αρχική</a></li>
  <li><a href="#">Σχετικά</a></li>
  <li><a href="#">Άρθρα</a></li>
  <li><a href="#">Επικοινωνία</a></li>
 </ul>
</nav>

--------------------------------------------------------------------------------------------------------------------
<article>
 <p> Μπλα-μπλα Μπλα  Μπλα  Μπλα  Μπλα  Μπλα  Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα
 Μπλα Μπλα Μπλα Μπλα Μπλα.</p>
 <section>
 <p>Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα Μπλα
 Μπλα Μπλα Μπλα Μπλα .</p>
 </section>
</article>

---------------------------------------------------------------------------------------------------------------------------
<aside>
 <section>
  <h2>Ακολουθηστε με</h2>
   <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Youtube</a></li>
   </ul>
 </section>
 <section>
 <h2>Τελευταία νέα</h2>
 ...
 </section>
</aside>

---------------------------------------------------------------------------------------------------------------------------------
<footer>
 <section id="about">Σχετικά με εμένα......</section>
 <section id="latest_comments">Τελευταία Σχόλια......</section>
 <section id="blogroll">Blogroll...</section>
</footer>

-----------------------------------------------------------------------------------------------------------------------------
</body>
</html>
ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 13 Ιουνίου 2013

CSS 3D ΚΟΥΜΠΙ ΜΕ ΠΑΡΑΠΟΜΠΗ

Μπορούμε να τα προσθέσουμε σαν gadget στο μπλοκ μας από τον μπλόκερ.



1.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>CSS3 Punch Button</title>
 <meta name="description" content="CSS Punch Button">
 <style>

 /* punch
*******************************************************************************/
button.punch {
 background: #4162a8;
 border-top: 1px solid #38538c;
 border-right: 1px solid #1f2d4d;
 border-bottom: 1px solid #151e33;
 border-left: 1px solid #1f2d4d;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 color: #fff;
 font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
 line-height: 1;
 margin-bottom: 10px;
 padding: 10px 0 12px 0;
 text-align: center;
 text-shadow: 0px -1px 1px #1e2d4d;
 width: 150px;
 -webkit-background-clip: padding-box; }

button.punch:hover {
 -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
 cursor: pointer; }

button.punch:active {
 -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
 margin-top: 8px; }
 </style>
</head>

<body>
 <div>
 <button class="punch">punch</button>
 </div>

</body>
</html>



Μπορούμε να ρυθμίσουμε πολλούς παραμέτρους και να τα φέρουμε στα μέτρα μας



2.

<html lang="en">
 <style>
 /****************************************************
 *  Push Button
 *****************************************************/
.push_button{
 position:relative;
 width:200px;
 color:#FFF;
 display:block;
 text-decoration:none;
 margin:0 auto;
 border-radius:5px;
 border:solid 1px #D94E3B;
 background:#cb3b27;
 text-align:center;
 padding:20px 30px;
 -webkit-transition: all 0.1s;
 -moz-transition: all 0.1s;
 transition: all 0.1s;
 -webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
}

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
}

</style>

</html>

<body>
<a href=" " class="push_button">
 Push Me
</a>
</body>


ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 6 Ιουνίου 2013

CSS ΚΟΥΜΠΙΑ ΓΙΑ ΣΑΙΤ

 Τρεις κώδικες για κουμπιά, τα οποία τοποθετώ  στο μπλοκ μου με τον κλασικό τρόπο σαν gadget δίνω ποιο κάτω:

  1.
  <a class="thenumberone" data-page="2" data-sessionlink="ei=CNeu0JvY_rICFciRfAod9HFRjg%3D%3D" href="το link που θες να ανοίγει" style="-webkit-box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; background-color: #C9E1FF; background-image: -webkit-linear-gradient(top, rgb(250, 250, 250) 0px, rgb(220, 220, 220) 100%); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(170, 170, 170); border-style: solid; border-top-left-radius: 2px; border-top-right-radius: 2px; border-width: 1px; box-shadow: rgb(255, 255, 255) 0px 0px 1px inset; color: #000000; cursor: pointer; display: inline-block; font-family: aria, sans-serif; font-size: 15px; font-weight: bold; height: 2.78em; line-height: 2.8em; margin: 0px; outline: 0px; padding: 0px 0.91em; text-decoration: none; text-shadow: rgb(255, 255, 255) 0px 1px 0px; vertical-align: middle; white-space: nowrap; word-wrap: normal;"><span class="thenumberone" style="background-color: transparent; border: 0px; margin: 0px; padding: 0px;">ΟΝΟΜΑ</span></a>





2.
<a href="το link που θες να ανοίγει" style="background-color: white; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 13px; outline: none; text-align: -webkit-center;" target="_blank"><button class="submit btn primary-btn" style="-webkit-box-shadow: rgba(255, 255, 255, 0.0980392) 0px 5px 0px inset; background-color: #019ad2; background-image: -webkit-linear-gradient(top, rgb(51, 188, 239), rgb(1, 154, 210)); background-repeat: repeat no-repeat; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(5, 126, 208); box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px inset; color: white; cursor: pointer; font-weight: bold; line-height: 20px; margin: 0px; overflow: visible; padding: 5px 10px; position: relative; text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 1px;" tabindex="4" type="submit">ΟΝΟΜΑ</button></a>


 3.

 <div class="row-fluid text-center"
style="padding-bottom:2px; padding-top:2px;background-color:#0007fb">
<div class="btn-group" data-toggle="buttons-radio">
<button href="
link" id="wmp" type="button" class="btn">ΟΝΟΜΑ</button>
<button href="
link 2" id="flash" type="button" class="btn active">ΟΝΟΜΑ 2</button>
</div>  
</div>


Μπλε  ειναι οι ονομασιες
Κοκκινο  ειναι  οι διευθυνσεις
Ροζ  ειναι  τα χρωματα του φοντου
ΠΕΡΙΣΣΟΤΕΡΑ

ΑΝΟΙΓΜΑ ΑΝΑΡΤΙΣΕΩΣ ΣΕ ΝΕΑ ΚΑΡΤΕΛΑ

Πως γίνεται να ανοίγουν τα links των αναρτήσεων μας σε νέα καρτέλα.

1) Σύνδεση στον blogger
2) Σχεδίαση
3) Επεξεργασία HTML
4) Με την βοήθεια του CTRL + F ψάξτε το
 </body>
 5)Μόλις το βρείτε ακριβώς από πάνω του προσθέστε το παρακάτω κώδικα:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
    // Let's make external links open in a new window.
    var href = jQuery(this).attr('href');
 
    if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
        jQuery(this).attr("target", "_blank");
    }
});
//]]>
</script>




                                                                                     www.bloggertricks.gr
ΠΕΡΙΣΣΟΤΕΡΑ

Τετάρτη, 5 Ιουνίου 2013

CSS3 ΟΡΙΖΟΝΤΙΟ Drop Down Menu



Ο παρακάτω κώδικας αποτελεί ένα απλό οριζόντιο Drop Down  μενού,που ανοίγει με την τοποθέτηση του κήνσορα πάνω του.Τον τοποθετούμε απλά σαν  Gadget στο μπλοκ μας με τον κλασικό τρόπο.
  Τον συγκεκριμένο μπαίνει στην κορυφή της ταμπλέτας μας.
  Πάμε σύνδεση στο blogger>Σχεδίαση >διάταξη>προσθήκη Gadget>HTML/JavaScript και επικολλούμε τον παρακάτω κώδικα.

<div>
<style>
/*-- CSS3 Drop Down Menu -----*/                                     

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 450px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 30px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu">
<li><a href="#">ΑΡΧΙ</a></li>

<li> <a href="#">ΒΒΒΒ</a>
<ul>
<li><a href="#">------------</a></li>
<li><a href="#">------------</a></li>
<li><a href="#">------------</a></li>
<li><a href="#">------------</a></li>
<li><a href="#">------------</a></li>
</ul>
</li>

<li><a href="#">ΓΓΓ</a>
<ul>
<li><a href="#">---------</a></li>
<li><a href="#">--------</a></li>
</ul>
</li>
</ul>

<div>

Στο τμήμα <style> μπορούμε να κάνουμε πάρα πολλές ρυθμίσεις.
ΠΕΡΙΣΣΟΤΕΡΑ

Σάββατο, 1 Ιουνίου 2013

CSS, ΚΑΘΕΤΟ Hover Menu

   Ο παρακάτω κώδικας αποτελεί ένα απλό κάθετο hover μενού,που ανοίγει με την τοποθέτηση του κήνσορα πάνω του.Τον τοποθετούμε απλά σαν  Gadget στο μπλοκ μας με τον κλασικό τρόπο.
  Τον συγκεκριμένο καλό θα ήταν να έμπαινε στην αριστερή πλευρά της ταμπλέτας μας.
  Πάμε σύνδεση στο blogger>Σχεδίαση >διάταξη>προσθήκη Gadget>HTML/JavaScript και επικολλούμε τον παρακάτω κώδικα.

        <style type="text/css">

#global-nav {
    width: 181px;
    float: left;
    background: #A3FF0F;
}

#global-subnav {
    width: 181px;
    background: #EDEDED;
}

#global-nav a {
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    height: 15px;
    line-height: 15px;  
    text-indent: 6px;              
    text-decoration:none;
    font-weight: bold;
    width: 100%;
}

#global-nav ul{
    background: #009F00;
    padding: 0;
    margin: 0;
}

#global-subnav ul{
    background: #249111;
    position: relative;
    top: -10px;
    left: 30px;
}

#global-nav li{
    list-style: none;  
    border-bottom: #31FF1E solid;
    border-width: 3px;
}

#global-nav ul ul li{
    display:none;
}

#global-nav li:hover {
    background: #00248C;
}

#global-nav li:hover ul li{
    display:block;
}

</style>

<div id="global-nav">
    <ul>
        <li><a href="#One">ΑΘΗΝΑ</a>
            <div id="global-subnav">
                <ul>
                    <li><a href="#A">A</a></li>
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#Two">ΘΕΣΣΑΛΟΝΙΚΗ</a>
            <div id="global-subnav">
                    <ul>
                        <li><a href="#1">ενα</a></li>
                        <li><a href="#2">δυο</a></li>
                        <li><a href="#3">τρια</a></li>
                        <li><a href="#4">τεσσερα</a></li>
                        <li><a href="#5">πεντε</a></li>
                        <li><a href="#6">εξι</a></li>
                    </ul>
            </div>
        </li>
    </ul>
</div>


Το πρώτο τμήμα του, <style>, ρυθμίζουμε τα χρώματα του και τις διαστάσεις του
Το δεύτερο είναι το Κυρίως  μενού μας.
ΠΕΡΙΣΣΟΤΕΡΑ

Παρασκευή, 17 Μαΐου 2013

ΠΡΟΣΘΕΣΤΕ Scroll Bar Widget στο blog σας


Το Scroll Bar Widget είναι ένα πολλή βολικό και λειτουργικό εργαλείο σε κάθε blog,  μέσα σε ένα μικρο κουτάκι να χωρέσετε όσα θέματά θέλετε.

Kαι πάμε να το βάλουμε στο blog μας με των ποιο γνωστό τρόποΠροσθήκη Gadget>Html/javascript .

Αντιγράψουμε αυτών τον κωδικό;

<div class="widget-content">
<ul style="height:150px;width:150px; overflow:auto; ">
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<li><a href="ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK">ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ</a></li>
<span style="font-weight:bold;"></span>
</ul></div>


Στο σημείο που γράφει; ΕΔΩ ΒΑΖΕΙΣ  ΤΟ LINK βάλτε το λινκ στο οποίο θέλετε να παραπέμπει o τιτλος.
Στο σημείο που γράφει; ΕΔΩ ΓΡΑΦΕΙΣ ΤΩΝ ΤΙΤΛΟ γραφετε των τιτλο.


ΠΕΡΙΣΣΟΤΕΡΑ

Αλλάξτε το πρότυπο σας χωρίς να χάσετε τα gadget

Ξεκινάμε, πρώτα από όλα θα πρέπει να πάμε στον πίνακά έλεγχου του blog μας και να βάλουμε όλα τα gadget που έχουμε σε μια σειρά κάπως έτσι; λεφτα απο το ιντερνετρ
Αφού βάλουμε όλα τα gadget στην σειρά θα πάμε σχεδίασή επεξεργασίά html, πατάμε ctrl+f  και βρίσουμε των παρακάτω κωδικό; <b:widget id= και ακριβώς κάτω από αυτών των κωδικό ακολουθούν οι παρακάτω κωδικοί; <b:section…> εδω αναμεσα </b:section> ανάμεσά σε αυτούς τους κωδικούς λοιπόν είναι όλα τα gadget μας,εάν δεν είχαμε βάλει όλα τα gadget μας στην σειρά, τότε δεν θα τα βρίσκαμε όλα μαζεμένα...... ανάμεσά σε αυτούς τους κωδικούς.. τώρα αντιγράφουμε τους κωδικούς που είναι ανάμεσά στους κωδικούς που ανέφερα, αμέσως μετά φορτώνουμε το νέο πρότυπο μας πάμε στον πίνακά έλεγχου κάνουμε ακριβώς την ίδια διαδικασία στο τέλος όμως επικολλούμε αναμεσα εκεί που αναφέραμε τους κωδικούς που αντιγράψαμε από το παλιό μας πρότυπο.
Πατάμε αποθήκευσή και είμαστε έτοιμη.



                                                                                    http://lefta4you.blogspot.gr
ΠΕΡΙΣΣΟΤΕΡΑ

ΔΙΑΓΡΑΦΗ ΤΟΥ : Εγγραφή σε Αναρτήσεις Atom



Πραγματικά το συγκεκριμένο μήνυμα είναι τελείως άχρηστο καθώς υπάρχει το rss  και οι αναγνώστες μας μπορούν να κάνουν εγγραφή στο blog μας από το rss.

Σύνδεση>Blogger> πρότυπο> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων με το ctrl+F ψάχνουμε να βρούμε  το :----------------------------------------------- */      το έχουν όλα τα πρότυπα είναι πάνω πάνω σχεδόν στο πρότυπο μας
Ακριβώς κάτω από αυτήν την γραμμή θα βάλουμε αυτών των κώδικα:  .feed-links {display: none; }
πατάμε αποθήκευση


    η διαγράφοντας το κώδικα       <b:include name='feedLinks'/>  και  πατάμε αποθήκευση .

σημείωση: για διαγραφή του:    Παλαιότερη Ανάρτηση...... Αρχική σελίδα     διαγράφουμε το:  
                        <b:include name='nextprev'/>     και  πατάμε αποθήκευση
ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 16 Μαΐου 2013

ΡΥΘΜΙΖΟΥΜΕ ΤΟΝ ActionScript ΚΩΔΙΚΑ ΕΝΟΣ Flash MP3 Player


 Έχουμε κατασκευάσει τον παραπάνω  Flash Player  που βλέπεται με την βοήθεια κάποιου Designer.
   Για την πλήρη λειτουργία του θα πρέπει να χρησιμοποιήσουμε  ActionScript  κώδικα:
Κάνοντας δεξι κλικ πάνω στο  Frame 1 και πατάμε στην παράμετρο ActionScript. Στο πλαίσιο που ανοίγει προσθέτουμε τον κώδικα  μόνο της παραγράφου 1.

 1.     Ρυθμίζουμε τον ActionScript κώδικα για το Πλαίσιο 1 (Frame 1)

mySnd = new Sound(); // create sound object
sndbar._visible = false; // hide the sound bar initially


// onLoad executed when the sound completes to load
mySnd.onLoad = function(){
 // set total time in seconds on the display instead of percentage
 totalseconds = Math.floor(mySnd.duration/1000);
 totaltime=Math.floor(totalseconds/60) + ":" + totalseconds%60;
 // show sound bar for playback
 sndbar._visible = true;

}

// to load your own sound put it on the web
// and change the path below
mySnd.loadSound("http://www.flashdesignerzone.com/tutorials/sound.mp3",true);



volume = 100;
pause=0;


function f1()
{
 // percent loaded
 buffered=Math.floor((mySnd.getBytesLoaded()/mySnd.getBytesTotal())*100);

 // display progress on the display
 if(buffered<100) { totaltime=buffered; totaltime = totaltime+"%"; }

 // resize sound playing bar
 sndbar._xscale=(mySnd.position/mySnd.duration)*100;

 // display how many seconds played
 playedseconds=Math.floor(mySnd.position/1000);
 playedtime=Math.floor(playedseconds/60) + ":" + playedseconds%60;

 // if stopped remove sound bar
 if(action=="stop"){ sndbar._xscale=0; }

 if(pause==1){
  pausepos=mySnd.position;
  mySnd.stop();
 }

}

setInterval(f1,100); // trigger f1 every 0.1 second

      Με το κόκκινο είναι η διεύθυνση που έχουμε τοποθετήσει το mp3 αρχείο  ήχου μας .


2.    Κωδικό για το κουμπί Αναπαραγωγή   onClick (Play button)

 mySnd.start(0,100);
pause=0;
action="play";



3.    Κωδικό για το κουμπί Stop   onClick(Stop button)

mySnd.stop();
action="stop";


4.     Κωδικό για το κουμπί Παύση   onClick(Pause button)

if(pause==1){
 pause=0;
  mySnd.start(pausepos/1000);
} else {
 pause=1;
}



5.  Κωδικό για το κουμπί Αύξησης έντασης   onClick

volume = volume + 10;
if(volume>100) volume = 100;
mySnd.setVolume(volume);



6.  Κωδικό για το κουμπί μύωσης έντασης   onClick

volume = volume - 10;
if(volume<0) volume = 0;
mySnd.setVolume(volume);




ΠΕΡΙΣΣΟΤΕΡΑ

Τετάρτη, 10 Απριλίου 2013

ΕΠΙΠΛΕΟΝ ΠΕΔΙΑ ΓΙΑ ΤΑ gadget

Σε αυτό το άρθρο θα ήθελα να σας πω πώς να προσθέσετε επιπλέον πεδία για τα gadget. Στο πάνω μέρος του blog μας (head) είτε στην κεντρική σελίδα πριν από το άρθρο, πάμε λοιπόν νa προσθέσουμε.
1) Πίνακάς έλεγχου
2) Σχεδίασή
3) Επεξεργασίά HTML
4) τσεκαρουμε το τετραγωνάκι (Επέκταση προτύπων γραφικών στοιχείων)
5) Πατάμε στο πληκτρολόγιο μας ctrl+f οπού μας ανοίγει ένα παραθυράκι αναζητήσεις.


Αντιγράφουμε των παρακάτω κωδικό;<div id='header-wrapper'>
και το  επικολλουμε στον παραθυράκι της αναζητήσεις, και αμέσως το βρίσκουμε μέσα στους κωδικούς HTML.
Capture6
Ακριβώς μέτα από αυτόν των κωδικό ακολουθούν αυτοί οι κωδικοί;

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'>
<b:includable id='main'>

στους οποίους θα πρέπει να κάνουμε 2 αλλαγές να αλλάξουμε το 1 με 2 και το no με yes.
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'>
<b:includable id='main'>

Μέτα της 2 αυτές αλλαγές πατάμε αποθήκευσή και είμαστε έτοιμη, τώρα πάμε στην σχεδίασή και θα δούμε πως στο πανό μέρος έχει εμφανιστής ένα επιπλέον πεδίο για προσθήκη gadget.
Με τον ίδιο τρόπο βρίσκουμε των παρακάτω κωδικό;
<div id='main-wrapper'>
Κάτω από αυτόν των κωδικό ακόλουθη ο επόμενος κωδικός;

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

Στον οποίο θα κάνουμε μια αλλαγή θα αλλάξουμε το no με yes.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

Kαι θα πατήσουμε αποθήκευση, αμέσως θα προσετέθη ένα νέο πεδίο για προσθήκη gadget στην κεντρική σελίδα πριν από το άρθρο.
Προσοχή;
εάν μετά των κωδικό;<div id='main-wrapper'> δεν ακόλουθη ο κωδικός;
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
Τότε προσθέστε μονοί σας αυτών των κωδικό. 


                                                                                         http://lefta4you.blogspot.gr
ΠΕΡΙΣΣΟΤΕΡΑ

Τρίτη, 9 Απριλίου 2013

ΠΑΡΑΘΥΡΑ Pop-Up Windows





Η διαφορά ανάμεσα σε Pop-Up Windows και νέα παράθυρα του Browser

Στην πραγματικότητα δεν υπάρχει καμία διαφορά. Κάποια Pop-Up Windows μπορεί να μην περιέχουν την μπάρα εργαλείων ή να μην εμφανίζουν το URL στο οποίο βρίσκονται, αλλά στην πραγματικότητα είναι και αυτά νέες απεικονίσεις σελίδων από τον Browser που χρησιμοποιείτε.

Για να τα διαχωρίσουμε λοιπόν, όταν στο κείμενό μας αναφέρεται ο όρος Pop-Up Windows θα δηλώνει παραθυράκια όπως αυτό που εμφανίζεται όταν φορτώνετε αυτή τη σελίδα ή όπως τα διαφημιστικά που συναντούμε σε υπηρεσίες δωρεάν φιλοξενίας σελίδων όπως το Geocities και αλλού. Αντίθετα ο όρος νέο παράθυρο θα χρησιμοποιείται για παράθυρα που δημιουργούνται όταν επιλέξουμε File / New (Αρχείο - Δημιουργία - Παράθυρο) στον Browser που χρησιμοποιούμε.

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

Τα Pop-Up Windows και τη χρήση τους

Τα πρώτα Pop-Up Windows, τα οποία όπως θα μάθουμε παρακάτω έχουν και άλλες εφαρμογές εκτός από τις διαφημιστικές, εμφανίστηκαν για πρώτη φορά γύρω στα 1995 και 96 όταν κυκλοφόρησε το Netscape 3.0 και η αγορά συνειδητοποίησε τις νέες δυνατότητες που προσέφερε η Java και η JavaScript. Τα Pop-Up Windows δημιουργούνται χάρη σε κώδικα JavaScript ο οποίος τοποθετείται μέσα στον κώδικα HTML της Web σελίδας με σκοπό να δημιουργηθεί ένα νέο παράθυρο από τον Browser και να οριστούν τα χαρακτηριστικά του.

Ο κώδικας και η σημασία του:

<script language=JavaScript>
open("URL", "όνομαΠαραθύρου", ["χαρακτηριστικάΠαραθύρου"]) 

</script>

Τα παραπάνω ακατανόητα πράγματα σημαίνουν τα εξής:

<script language=JavaScript> = Δηλώνει στην Browser ότι από δω και πέρα δεν θα διαβάζει HTML (τη γλώσσα δημιουργίας των web σελίδων), αλλά JavaScript.

open = Δηλώνει στην Browser ότι πρέπει να ανοίξει ένα νέο παράθυρο (το "Pop-Up Window")

"URL" = Αυτή είναι η διεύθυνση της σελίδας η οποία θα φορτωθεί στο νέο παράθυρο.

"όνομαΠαραθύρου" = Αυτό είναι το όνομα που θα δώσουμε στο νέο παράθυρο. Αν δεν καταλαβαίνετε γιατί πρέπει να "βαφτίσουμε" το παράθυρό μας μην ανησυχείτε. Κάτι τέτοιο μας παρέχει περισσότερες δυνατότητες (π.χ. δημιουργία παραπομπών από παράθυρο σε παράθυρο) και θα καταλάβετε τα πάντα γι' αυτό αν διαβάσετε για πλαίσια και την παράμετρο Target.

["χαρακτηριστικάΠαραθύρου"] = Οι αγκύλες ( [ ] ) υποδηλώνουν ότι αυτά τα χαρακτηριστικά είναι προαιρετικά. Είναι όμως πολύ χρήσιμα αφού μας επιτρέπουν να ελέγξουμε καλύτερα την εμφάνιση των παραθύρων που δημιουργούμε.

Οι διαθέσιμες επιλογές μας είναι:

toolbar[=yes / no] ή [=1 / 0]
location[=yes / no] ή [=1 / 0]
directories[=yes / no] ή [=1 / 0]
status[=yes / no] ή [=1 / 0]
menubar[=yes / no] ή [=1 / 0]
scrollbars[=yes / no] ή [=1 / 0]
resizable[=yes / no] ή [=1 / 0]
width=## (όπου ## είναι ο αριθμός των pixels)
height=## όπου ## είναι ο αριθμός των pixels)


</script> = Τώρα δηλώνουμε στον Browser ότι ο JavaScript κώδικας τελείωσε και μπορεί να συνεχίσει το διάβασμα της HTML (ή οτιδήποτε άλλο είχαμε χρησιμοποιήσει για να δημιουργήσουμε τη σελίδα μας).

Ας δούμε λίγο τώρα τι σημαίνουν και πώς μπορούν να χρησιμοποιηθούν τα χαρακτηριστικάΠαραθύρου:

    Ας υποθέσουμε ότι δεν θέλετε να υπάρχει μπάρα εργαλείων (toolbar) στο Pop-Up Window σας. Σε αυτή την περίπτωση θα πρέπει να δηλώσετε toolbar=no ή toolbar=0 (0 είναι το μηδέν και όχι το κεφαλαίο όμικρον). Φαντάζομαι ότι το yes/no είναι απόλυτα κατανοητό. Η σύνταξη 1/0 έχει να κάνει με δυαδική λογική (Binary Logic) και 1=yes ενώ 0=no.

    Αν δεν δηλώσετε τίποτε στα χαρακτηριστικάΠαραθύρου τότε θεωρείται αυτόματα ότι όλα ισχύουν (είναι σαν να τα έχετε δηλώσει όλα ως = 1 ή ως yes). Αν πάλι δεν ορίσετε συγκεκριμένο height (ύψος) ή width (πλάτος), τότε το ο browser θα σχεδιάσει το παράθυρο όσο μεγαλύτερο μπορεί.

Μερικές ακόμη τεχνικές (Tips & Tricks)

Συμβουλή 1: Βεβαιωθείτε ότι έχετε πράγματι ανάγκη από Pop-Up Windows. Πολλά απ' όσα επιθυμείτε μπορούν πιθανώς να υλοποιηθούν με πλαίσια (frames) ή με την παράμετρο Target. Όσοι βαριούνται να διαβάσουν τις σχετικές οδηγίες μπορούν απλώς να δουν πώς λειτουργεί αυτή η τεχνική στον ακόλουθο κώδικα:

<a href="http://www.webhelp.org/frames.html" target="_new">Jonny's Frames Tutorial</a>

Προσέξτε το target="_new". Θα ανοίξει ένα νέο παράθυρο στο οποίο θα φορτωθεί η σελίδα http://www.webhelp.org/frames.html.

Συμβουλή 2: Για λόγους ευγενείας και ευχρηστίας είναι καλό να προσθέτετε στα Pop-Up Windows σας κουμπιά που επιτρέπουν στους χρήστες να τα κλείσουν. Αν και μπορούν να το κάνουν και από τις βασικές επιλογές στο πάνω δεξιά μέρος του παραθύρου αυτό θα κάνει πιο φιλικά τα Pop-Up Windows σας και θα δώσει μεγαλύτερη σιγουριά στους επισκέπτες των σελίδων σας (οι αρχάριοι χρήστες θα καταλάβουν ότι επιτρέπεται να κλείσουν το παράθυρο και πως αυτό δεν θα δημιουργήσει κανένα πρόβλημα).

Ο κώδικας που χρησιμοποιήθηκε για να υπάρχει κουμπί κλεισίματος του pop up το οποίο σας υποδέχθηκε σε αυτή τη σελίδα είναι:

<form name="closer"> <input type=button value="Close This Window" onClick="self.close()"> </form>

Τα κουμπιά δημιουργούνται πάντοτε με κώδικα ο οποίο περιέχεται μέσα στις οδηγίες (tags) <form> και </form>. Το ίδιο το κουμπί δημιουργήθηκε από τη μεσαία γραμμή. Το input σημαίνει ότι ο χρήστης θα δώσει κάποια πληροφορία στον browser (στην προκειμένη περίπτωση θα του πει κλείσε το παράθυρο). Το type=button δηλώνει τι είδους (τύπου) θα είναι αυτή η πληροφορία (πάτημα κουμπιού ή όχι) και το value καθορίζει πώς θα εμφανίζεται στον χρήστη (value="Κλείσιμο παραθύρου" σημαίνει ότι το κουμπί θα γράφει επάνω του Κλείσιμο παραθύρου.

Το onClick="self.close()" είναι ο κώδικας που κάνει όλη τη δουλειά. Αυτός δηλώνει στον browser ότι πρέπει να κλείσει το παράθυρο στο οποίο περιέχεται αυτός ο κώδικας.
ΠΕΡΙΣΣΟΤΕΡΑ

Σάββατο, 6 Απριλίου 2013

ΚΑΘΕΤΟ CSS ΜΕΝΟΥ ΣΤΟ ΜΠΛΟΚ ΜΟΥ



      Τον HTML θα τον βάλετε στη πλαϊνή σας στήλη.
 Εάν το βάλετε στη δεξιά θα βάλετε το κώδικα κάτω από τη φράση  <div id='sidebar-wrapper'>  η <div id='sidebar-wrapper-right'>
αν το βάλετε στην αριστερή, θα το βάλετε κάτω από τη φράση <div id='sidebar-wrapper-left'>.Βέβαια μπορείτε να το προσθέσετε σαν Gadget στη πλαϊνή σας στήλη.

  Τον GSS κώδικα θα τον τοποθετήσουμε πριν  τον κώδικα : ]]></b:skin> (Αναζητώ με το CTRL+F) μέσα στον HTML.


    
1.  Navigation Menu 

CSS CODE:
 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }


HTML CODE:
 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>


     
2.  Navigation Menu

  CSS CODE:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }


HTML CODE:
 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>



    
  3.  Navigation Menu 

     CSS CODE:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

HTML CODE:

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

       
4.  Navigation Menu  Μπλε

     CSS CODE:
 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif); padding: 8px 0 0 10px; }


HTML CODE:

<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

     
5.  Navigation Menu Καφέ

  CSS CODE:
 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }


HTML CODE:
 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

6.  Navigation Menu Ασημί με χρώματα

CSS CODE:
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }


HTML CODE:
 <div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>


7.  Navigation Menu Πορτοκαλί

CSS CODE:
 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6fxCdMLI/AAAAAAAACp4/XQPhnSUOmYs/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6fxCdMLI/AAAAAAAACp4/XQPhnSUOmYs/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6fxCdMLI/AAAAAAAACp4/XQPhnSUOmYs/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

HTML CODE
 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

8.  Navigation Menu Μπλε

CSS CODE:
#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }


HTML CODE
 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

9.  Navigation Menu Μαύρο


CSS CODE:
#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML CODE
 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
10.  Navigation Menu  χακί

CSS CODE:
#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

HTML CODE
 <div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

11.  Navigation Menu Μαύρο-μπλε

CSS CODE:
#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML CODE
 <div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>
ΠΕΡΙΣΣΟΤΕΡΑ

ΣΥΝΔΙΑΣΜΟΣ HTML ΚΑΙ CSS ΚΩΔΙΚΑ ΓΙΑ ΜΕΝΟΥ ΣΕ ΜΠΛΟΚ



   Τον HTML θα τον βάλετε στη πλαϊνή σας στήλη.
 Εάν το βάλετε στη δεξιά θα βάλετε το κώδικα κάτω από τη φράση  <div id='sidebar-wrapper'>  η <div id='sidebar-wrapper-right'>
αν το βάλετε στην αριστερή, θα το βάλετε κάτω από τη φράση <div id='sidebar-wrapper-left'>.Βέβαια μπορείτε να το προσθέσετε σαν Gadget στη πλαϊνή σας στήλη.

  Τον CSS κώδικα θα τον τοποθετήσουμε πριν  τον κώδικα : ]]></b:skin> (Αναζητώ με το CTRL+F) μέσα στον HTML.

         1.   Blue Impression Drop Down Menu

HTML CODE:

<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>



   CSS CODE:

.bg {background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqYv9n9TI/AAAAAAAAAIk/oiiHv79iBCk/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsqd0O5eNI/AAAAAAAAAIw/qhsKMaaJL20/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqVzs-dBI/AAAAAAAAAIc/nCJLoz72b2Q/s1600/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}



2.   Blue Center Drop Bar

   HTML CODE:

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />


  CSS CODE:

.nav {height:35px;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQspKEXsD1I/AAAAAAAAAIU/XP4RobAgtGk/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;




            3   Blue Dawn Drop Down


HTML CODE:

<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p>&nbsp;</p>

<p>&nbsp;</p>



</div>

<div class="content-bottom"></div>

</div>

</div>


  CSS CODE:

.wrapper1{

color: #44433f;

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;

float: left;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: left;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: left;

padding: 0 7px;

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;

line-height: 38px;

overflow: hidden;

float: left;

}

a .menu-left {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

left: 6px;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}



.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;

float: left;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-left: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify;

}

.content-bottom {

width: 710px;

background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}


     
4.   Simple Black Drop Down Menus
HTML CODE:

<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>
CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
5.  Simple Blue Drop Down Menus

   
HTML CODE:

<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>
CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
6.   Simple Green Drop Down Menus
HTML CODE:

<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>
CSS CODE:

div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
7 .     Blue Tabbed Drop Down


 
  HTML CODE:

<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>
  CSS CODE:

.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{

background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQtAtX3PdII/AAAAAAAAAJk/syUHkWP9X6Q/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}
ΠΕΡΙΣΣΟΤΕΡΑ