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

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

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


   Δέκα κώδικες CSS, για να δημιουργήσουμε το μενού του σάιτ μας βλέπουμε ποιο κάτω που τους προσθέτουμε σαν Gadget με τον γνωστό μας τρόπο.

           1    Απλό

<li><a href="#" ><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li
>

           2  Μαύρο - πορτοκαλί

<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
 ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666;
 border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist
a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active
 { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style>
<div id="navcontainer">
 <ul id="navlist">
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
</ul>
</div>


           3  Μπλε - λευκό

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7;
 border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; }
 ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0;
 background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist
 a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; }
 </style>
 <div id="navcontainer">
 <ul id="navlist">
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 </ul>
 </div>


         4  Μαύρο -  άσπρο πλαίσιο

<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; }
 ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; }
 #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; }
 </style> <div id="navcontainer">
 <ul id="navlist">
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Link 5</span></a></li>
 <li><a href="#"><span>Link 6</span></a></li>
 <li><a href="#"><span>Link 7</span></a></li>
 </ul>
 </div>


          5  Πορτοκαλί - μπλε

line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; }
 #tabsI a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png)
 no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block;
 background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; }
 #tabsI a:hover span { background-position:100% -42px; } </style>
 <div id="tabsI">
 <ul>
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 </ul>
 </div>


         6  Κοκκινο-κοκκινο σκουρο

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; }
 #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; }
#tabsE a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabsE a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;}
 /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; }
 </style>
 <div id="tabsE">
 <ul>
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 </ul>
 </div>


         7  Μπλε  GSS


<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; }
 #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10
 a { float:left; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_knlQKBI/AAAAAAAACu0/8LiiBZnKfsw/s1600/tableft10.png)
no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs10 a span { float:left; display:block; background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_k-9mnTI/AAAAAAAACu4/zgN8RBPo47g/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover
 span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; }
 #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; }
 </style>
 <div id="tabs10">
 <ul>
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Link 5</span></a></li>
 <li><a href="#"><span>Link 6</span></a></li>
 <li><a href="#"><span>Link 7</span></a></li>
 </ul>
 </div>


       8  Μαύρο

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; }
 #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; }
 #tabs6 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif) no-repeat left top; margin:0;
 padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;}
 /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current
 a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; }
 </style>
 <div id="tabs6">
 <ul>
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Link 5</span></a></li>
 <li><a href="#"><span>Link 6</span></a></li>
 <li><a href="#"><span>Link 7</span></a></li>
 </ul>
 </div>


      
      9  Μαύρο-μπλε


<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; }
 #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; }
 #tabs3 a { float:left; background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-fxTO5uI/AAAAAAAACt8/-Obicf3fMP0/s1600/tableft3.gif)
 no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span
{ float:left; display:block; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-gDciBuI/AAAAAAAACuA/CQSbr-4_cGU/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; }
 /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; }
 #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; }
 #tabs3 #current a span { background-position:100% -42px; }
 </style>
 <div id="tabs3">
 <ul>
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Link 5</span></a></li>
 <li><a href="#"><span>Link 6</span></a></li>
 <li><a href="#"><span>Link 7</span></a></li>
 </ul>
 </div>


       10 Πράσινο-μπλε

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; }
 #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a
{ float:left; background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
 #tabs5 a span { float:left; display:block; background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif)
 no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;}
 /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span
 { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; }
 </style>
 <div id="tabs5">
 <ul>
 <li><a href="#"><span>Link 1</span></a></li>
 <li><a href="#"><span>Link 2</span></a></li>
 <li><a href="#"><span>Link 3</span></a></li>
 <li><a href="#"><span>Link 4</span></a></li>
 <li><a href="#"><span>Link 5</span></a></li>
 <li><a href="#"><span>Link 6</span></a></li>
 <li><a href="#"><span>Link 7</span></a></li>
 </ul>
 </div>

                                                                                                                                  
                                                                                                     24works.blogspot.com

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.