Η εύκολη στη χρήση πλοήγηση είναι σημαντική για κάθε ιστότοπο.
Με το CSS μπορείτε να μετατρέψετε τα βαρετά μενού HTML σε όμορφες γραμμές πλοήγησης.
Μια γραμμή πλοήγησης χρειάζεται τυπικό HTML ως βάση.
Στα παραδείγματά μας θα δημιουργήσουμε τη γραμμή πλοήγησης από μια τυπική λίστα HTML.
Μια γραμμή πλοήγησης είναι βασικά μια λίστα συνδέσμων, επομένως η χρήση των στοιχείων <ul> και <li> είναι τέλεια έννοια:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>
</body>
</html>
Τώρα ας αφαιρέσουμε τις κουκκίδες και τα περιθώρια και το padding από τη λίστα:
Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Παράδειγμα που εξηγείται:
list-style-type: none;- Αφαιρεί τις σφαίρες. Μια γραμμή πλοήγησης δεν χρειάζεται δείκτες λίστας
margin: 0;για να καταργήσετε τις προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης
padding: 0;για να καταργήσετε τις προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης
Ο κώδικας στο παραπάνω παράδειγμα είναι ο τυπικός κώδικας που χρησιμοποιείται τόσο στις κάθετες όσο και στις οριζόντιες γραμμές πλοήγησης, για τον οποίο θα μάθετε περισσότερα στα επόμενα κεφάλαια.