2 Mega Menu - Το τέλειο Μενού

Aυτή η ανάρτηση σας δίνει οδηγίες πως να βάλετε ένα από τα πιο όμορφα και αξιόλογα μενού...σε αυτό το blog θα δώσω ένα απλό κώδικα, για να μη μπερδευτείτε, και στο vip-blogger (το συνδρομητικό) θα δώσω όλο το κώδικα με πολλές επεξηγήσεις, γιατί βασίζεται σε κώδικα CSS, και έχει πολλές διαφορετικές επεκτάσεις (μπορείτε να βάλετε τα πάντα...από link, μέχρι chat και εικόνες με κείμενο)

Ο ΚΩΔΙΚΑΣ ΓΙA ΤΟ ΑΠΛΟ ΜΕΝΟΥ:  HTML & CSS
(Demo υπάρχει εδώ, ψηλά, και στο VIP-blogger)


<div id="menu">

    <li><a href="#" class="drop">Home</a><!-- Begin Home Item -->

        <div class="dropdown_2columns"><!-- Begin 2 columns container -->

            <div class="col_2">

                <h2>Welcome !</h2>

            </div>

            <div class="col_2">

                <p>Εδω γράφετε ένα μικρό η μεγάλο μήνυμα καλωσορίσματος</p>            

                <p>Εδω γράφετε ένα μικρό η μεγάλο μήνυμα καλωσορίσματος</p>            

            </div>

            <div class="col_2">

                <h2>Φωτογραφία + κειμενο</h2>

            </div>

            <div class="col_1">

                <img src="http://1.bp.blogspot.com/-ghzmqWV-JVc/T_sb6dIHydI/AAAAAAAAGGI/KVKV6tgO-fM/s1600/browsers.png" width="125" height="48" alt="" />

            </div>

            <div class="col_1">

                <p>Εδώ βάζετε ένα κείμενο για τη φωτογραφία που θα βαλετε δίπλα</p>

            </div>

        </div><!-- End 2 columns container -->

    </li><!-- End Home Item -->


<li class="menu_right"><a href="#" class="drop">1 Column</a>

  <div class="dropdown_1column align_right">

                <div class="col_1">

                    <ul class="greybox">

                        <li><a href="#">Link 1</a></li>

                        <li><a href="#">Link 2</a></li>

                        <li><a href="#">Link 3</a></li>

                        <li><a href="#">Link 4</a></li>

                        <li><a href="#">Link 5</a></li>

                        <li><a href="#">Link 6</a></li>

                        <li><a href="#">Link 7</a></li>

                        <li><a href="#">Link 8</a></li>

</div>



<li class="menu_right"><a href="#" class="drop">1 Column</a>

  <div class="dropdown_1column align_right">

                <div class="col_1">

                    <ul class="greybox">

                        <li><a href="#">Link 1</a></li>

                        <li><a href="#">Link 2</a></li>

                        <li><a href="#">Link 3</a></li>

                        <li><a href="#">Link 4</a></li>

                        <li><a href="#">Link 5</a></li>

                        <li><a href="#">Link 6</a></li>

                        <li><a href="#">Link 7</a></li>

</div>

 

 <li class="menu_right"><a href="#" class="drop">1 Column</a>

  <div class="dropdown_1column align_right">

                <div class="col_1">

                    <ul class="greybox">

                        <li><a href="#">FreelanceSwitch</a></li>

                        <li><a href="#">Creattica</a></li>

                        <li><a href="#">WorkAwesome</a></li>

                        <li><a href="#">Mac Apps</a></li>

                        <li><a href="#">Web Apps</a></li>

                        <li><a href="#">NetTuts</a></li>

                        <li><a href="#">VectorTuts</a></li>

                        <li><a href="#">More...</a></li>

                    </ul>  
                </div>
  </div>
 </li>

</div>

<style type="text/css">
/*<![CDATA[*/body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}

/* Navigation Bar */

#menu {
 list-style:none;
 width:440px;
 margin:0px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;

 /* Rounded Corners */

 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;

 /* Background color and gradients */

 background: #014464;
 background: -moz-linear-gradient(top, #0272a7, #013953);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

 /* Borders */

 border: 1px solid #002232;

 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}

#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;

 /* Background color and gradients */

 background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

 /* Rounded corners */

 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}

#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("http://2.bp.blogspot.com/-g423ObKCf1E/T_sb62gWAhI/AAAAAAAAGGQ/Hf3m6ubCTmY/s1600/drop.png") no-repeat right 7px;
}

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute !important;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;

 /* Gradient background */
 background:#F4F4F4;
 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

 /* Rounded Corners */
 -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 240px;}




#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
 left:-1px ;
z-index:444 !important;
    top:auto;
}

/* Columns */

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {
 float:right !important;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
 -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}

#menu li:hover div a {
 font-size:12px;
 color:#015b86;
}
#menu li:hover div a:hover {
 color:#029feb;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;

 /* Shadow */
 -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:216px;

 /* Rounded Corners */
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

.tabs-inner .widget li a {
padding: 1px ;
display:block !important;
border: 1px solid  transparent !important ;
}


/*]]>*/
</style>

***με τα χρωματιστά width ρυθμίζετε το πλάτος του drop down (αναπτυσσόμενο)...
***μπορείτε να βάλετε όλο το κώδικα σε ένα gadget ψηλά στο blog σας (κάτω από την επικεφαλίδα)...
***όλος ο κώδικας (είναι αρκετά περίπλοκος) θα βρίσκεται στο vip-blogger...
ΠΗΓΗ :  thanks to :  http://net.tutsplus.com/
ΚΑΛΗ  ΕΠΙΤΥΧΙΑ !!!