jQuery οριζόντιο menu

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Γενικώς σε πολλές Σελίδες σαν τη δική μου κυκλοφορούν διάφορες παραλλαγές οριζόντιων menu. Στο παρελθόν είχαμε παρουσιάσει κι άλλο ένα πιο απλό menu. Αυτή τη φορά θα δούμε μια άλλη εκδοχή με menu που περιέχει και υποκατηγορίες. Ακολουθήστε τα παρακάτω βήματα για να το εγκαταστήσετε στη Σελίδα σας:
  • Σύνδεση στον Blogger
  • Σχεδίαση / Επεξεργασία HTML
  • Βρείτε την ετικέτα </head>
  • Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<style type='text/css'>

ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative;
font-size: 1.2em;
background: #383838;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #fff;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url() repeat-x; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 100%;
background: #1376c9;
color: #fff;
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>
  • Αποθηκεύστε το πρότυπό σας.
  • Πηγαίνετε στην κατηγορία "Στοιχεία Σελίδας"
  • Επιλέξτε στον Header "Προσθήκη gadget - HTML/JavaScript"
  • Επικολλήστε τον παρακάτω κώδικα:

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">ΤΙΤΛΟΣ</a>
<span>
<a href="#">
ΤΙΤΛΟΣ</a> |
<a href="#">ΤΙΤΛΟΣ</a> |
<a href="#">ΤΙΤΛΟΣ</a>
</span>
</li>
<li>
<a href="#">
ΤΙΤΛΟΣ</a>
<span>
<a href="#">
ΤΙΤΛΟΣ</a> |
<a href="#">ΤΙΤΛΟΣ</a> |
<a href="#">ΤΙΤΛΟΣ</a>
<a href="#">ΤΙΤΛΟΣ</a>
<a href="#">ΤΙΤΛΟΣ</a>
</span>
</li>
<li>
<a href="#">
ΤΙΤΛΟΣ</a>
<span>
<a href="#">1 Υποκατηγορία</a> |
<a href="#">2
Υποκατηγορία</a> |
<a href="#">3 Υποκατηγορία</a> |
<a href="#">4 Υποκατηγορία</a> |
<a href="#">ΤΙΤΛΟΣ</a>
</span>
</li>
<li><a href="#">
ΤΙΤΛΟΣ</a></li>
<li><a href="#">ΤΙΤΛΟΣ</a></li>
<li><a href="#">ΤΙΤΛΟΣ</a></li>

</ul>

  • Βάλτε στη θέση της δίεσης το link που θέλετε να οδηγεί το κάθε κουμπάκι, βάλτε τον τίτλο σε κάθε κουμπάκι και πατήστε αποθήκευση.

    0 σχόλια:

    Post a Comment

     
    back to top