Obserwujący 0
woras

Poziome menu zakładki

1 post w tym temacie

Całość kodu, składa się tylko z HTML i CSS. Chyba nie ma nic w tym trudnego, pytania w komentarzach.

HTML

Tworzymy sobie poziome menu na zakładkach w HTML...

Rozpocznij listę znacznikiem <ul> , aby uzyskać listę wypunktowaną i zakończ znacznikiem </ul>

Każda pozycja listy powinna zaczynać się znacznikiem <li> i kończyć znacznikiem </li>.

Gotowy kod HTMl:
 

<ul> 
<li><a href="#">Rejestracja</a><li> 
</ul>

Między <ul> a </ul>, możemy tworzyć więcej zakładek do menu, tym samym sposobem co tu

<li><a href="#">Rejestracja</a><li>

Teraz nadamy trochę koloru, naszemu menu.

Gotowy kod CSS

<style> 
ul, ul li {  
       display: block;  
       list-style: none;  
       margin: 0;  
       padding: 0;  
}  
ul {  
       border-bottom: 1px solid #888;  
       float: left;  
       width: 100%;  
       padding-left: 20px;  
}  
ul li {  
       float: left;  
       margin-right: 10px;  
}  
ul a:link, ul a:visited {  
width: 100px;  
       text-decoration: none;  
       display: block;  
       background-color: navy;  
       color: white;  
       padding: 5px 10px;  
       border: 1px solid #888;  
       position: relative;  
       top: 1px;  
       font-weight: bold;  
}  
#current a {  
       background-color: #33FFFF;  
       border-bottom-color: #fff;  
       color: black;  
}  
ul a:hover {  
       background-color: #fff;  
       border-bottom-color: #fff;  
       color: black;  
       border-bottom: 1px solid #888;  
} 
</style>  

Już mi się opisywać tego nie chciało, każdy kto zna na poziomie podstawowym HTML/CSS powinien wiedzieć, co w tym kodzie się znajduje, w razie jakiś problemów czy pytań proszę kierować w tym temacie.

Jak widać nasze menu składa się z 2 kolorów Niebieski ciemny i jasny, biały pojawia się po najechaniu myszką na jedną z naszych zakładek w menu. Kolorki oczywiście można sobie pozmieniać w .css jak i rozmieszczenie.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na stronach

Napisano przed chwilą

Ceesik.pl

Gość
Ten temat jest zamknięty i nie można dodawać odpowiedzi.
Obserwujący 0