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

Πέμπτη, 10 Ιανουαρίου 2013

ΕΞΑΙΡΕΤΙΚΟ ΜΕΝΟΥ CSS ΓΙΑ Bloggers


   Πάνω απο το </heand> επικώλλουμε τον κωδικα

1.
<style type="text/css">
#catmenucontainer{
height:29px;
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}
#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}
#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#catmenu a:hover {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg)
repeat-x;
color: #fff;
display: block;
text-decoration: none;
}
#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg)
repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg)
repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}
#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

2.

    Προσθήκη gadget> HTML/JavaScript
                      και προσθέτουμε τον παρακάτω κώδικα


<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

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

<li><a href='#' title='#'>Tab 1</a>
<ul class='children'>
<li><a href='#' title='#'>1</a></li>
<li><a href='#' title='#'>2</a></li>
<li><a href='#' title='#'>3</a></li>
</ul>
</li>

<li><a href='#' title='#'>Tab 2</a>
<ul class='children'>
<li><a href='#' title='#'>1</a></li>
<li><a href='#' title='#'>2</a></li>
<li><a href='#' title='#'>3</a></li>
<li><a href='#' title='#'>4</a></li>
</ul>
</li>


<li><a href='#' title='#'>About</a></li>

<li><a href='#'' title='#'>Contact</a></li>


</ul>

</div>



Στη συνέχεια απλά κάνουμε αντικατάσταση το πρώτο # μετά το href= με το λινκ της κατηγορίας και δίπλα ανάμεσα στα >όνομα< αλλάζουμε το όνομα της κατηγορίας

     Αποθήκευση και τελειώσαμε.






Προσοχή!Σε περίπτωση που το μενού σταταματήσει να δουλεύει κανονικά απλά σώσε τις παρακάτω εικόνες στην επιφάνεια εργασίας και ανέβασέ τες π.χ. στο google sites .Στη συνέχεια αντικατέστησε από δύο φορές το λινκ (http://4.bp.blogspot.com/_4HKUHirY_2U/Swul0XJNShI/AAAAAAAAAT8/0MPzqd2ineY/catmenu.jpg) με αυτό της εικόνας που έχεις στο google sites και το ίδιο κάνε δύο φορές για το δεύτερο λινκ (http://3.bp.blogspot.com/_4HKUHirY_2U/Swul3Dap3uI/AAAAAAAAAUE/DvKs0kZKwCA/catmenuhov.jpg).

                                                                                             bloggertipandtrick.net

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

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

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