Ένα από τα πράγματα που γίνονται για να βοηθήσουν το blog επιτρέπει στους επισκέπτες να εξερευνήσουν το blog που δημιουργήσαμε αυτό είναι το μενού πλοήγησης. Γενικά αναπαύονται στο μενού πλοήγησης στο πάνω μέρος της πλευρικής στήλης ή blog.
Μετά από να βάλει menunavigasi terkandang δεν είμαστε ικανοποιημένοι με την εμφάνιση ή αποτέλεσμα στο μενού πλοήγησης. Και το πιο επίδραση στο μενού πλοήγησης χρησιμοποιώντας Jquery αναπτυσσόμενο παράδειγμα σχετικά με το αποτέλεσμα αν χρησιμοποιήσουμε το μενού πλοήγησης έχει υπο-μενού.
Αλλά ξέρετε ότι το αναπτυσσόμενο αποτέλεσμα μπορεί να δημιουργηθεί χωρίς τη χρήση Jquery. Ένας από αυτούς είναι με τη χρήση των υφισταμένων χαρακτηριστικά CSS3 μεταβάσεις.
Αυτή τη φορά θα μοιραστώ ένα παράδειγμα αναπτυσσόμενο μενού πλοήγησης με το υπο-μενού.
HTML δομή του μενού πλοήγησης μπορείτε να δείτε παρακάτω. Η δομή είναι εύκολο να καταλάβει. και υπάρχει μια κατηγορία από το μενού και υπομενού.
<div id="top"> <nav id="topmenu"> <ul> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Portfolio<span class="arrow">More Link</span></a> <ul class="sublist"> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link</a></li> <li><a href="#">Sub link<span class="arrow-right">More Link</span></a> <ul class="subsublist"> <li><a href="#">Sub Sub link</a></li> <li><a href="#">Sub Sub link</a></li> <li><a href="#">Sub Sub link</a></li> </ul> </li> </ul> </li> <li><a href="">Blog</a></li> <li><a href="">Contact Us</a></li> <li><a href="">Tutorials <span class="arrow">More Link</span></a> <ul class="sublist"> <li><a href="">Sub Link<span class="arrow-right">More Link</span></a> <ul class="subsublist"> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> </ul> </li> <li><a href="">Sub Link<span class="arrow-right">More Link</span></a> <ul class="subsublist"> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> </ul> </li> <li><a href="">Sub Link</a></li> <li><a href="">Sub Link</a></li> <li><a href="">Sub Link<span class="arrow-right">More Link</span></a> <ul class="subsublist"> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> <li><a href="">Sub Sub Link</a></li> </ul> </li> </ul> </li> <li><a href="">Resource</a></li> <li><a href="">Submit</a></li> <li><a href="">Advertise</a></li> <li><a href="">FAQ</a></li> </ul> </nav> </div>
ΑΠΟ mkr-site.blogspot.gr
0 σχόλια