Forum PHP.pl > [php] Proste menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

radziowie

23.12.2010, 18:34:43

Na jednej ze strony zauważyłem wg mnie w miarę ciekawe menu. Czy wiecie możne w jaki sposób można uzyskać podobny efekt?

Kod

http://lukaszwozniak.pl/
menu kategorie po prawej stronie

lukaskolista

23.12.2010, 18:47:27

Wiemy. Chodzi Ci o Art, DTP, T-shirt?

modern-web

23.12.2010, 18:56:53

Chyba pomyliłeś fora (popraw nazwę tematu - to nie ma nic wspólnego z php).
Proste...

HTML:

[HTML] pobierz, plaintext 
<ul>
  <li class="MENU"><a href="#">link1</a></li>
  <li class="MENU"><a href="#">link2</a></li>
  <li class="MENU"><a href="#">link3</a></li>
</ul>
[HTML] pobierz, plaintext

CSS:

[HTML] pobierz, plaintext 
LI.MENU { ... opisz tutaj swoje style ... }
[HTML] pobierz, plaintext

W stylach ustal hover i background i po kłopocie.
Dodatkowo dla czcionki daj jeszcze styl i określ dla niego margines na np. 5px

Pozdro.

lobopol

23.12.2010, 20:08:45

Kod

#sidebar-wrapper { width: 222px; float: left; margin-bottom: 20px; }
        #sidebar { float: left; padding-left: 0px; padding-right: 0px; width: 222px; margin-top: 5px; }
                .sidebar-box { padding-top: 5px; padding-bottom: 13px; padding-left: 15px; padding-right: 15px; margin-bottom: 0px; float: left; margin-bottom: 10px; width: 192px; background-color: #2a241e; background-image: url(images/sidebar-bg-Brown.gif); background-repeat: repeat-x; }
                .sidebar-box2 { padding-top: 5px; padding-bottom: 13px; margin-bottom: 0px; float: left; margin-bottom: 10px; width: 222px; background-color: #2a241e; background-image: url(images/sidebar-bg-Brown.gif); background-repeat: repeat-x; }
                        .sidebar-box2 a:hover { border-bottom: none; }
                        .sidebar-box ul li a:link, .sidebar-box ul li a:visited, .sidebar-box ul li a:active { display: block; color: #FFF; width: 176px; margin-bottom: 5px; padding: 3px 3px 3px 10px; background-color: #332c25; border: 1px solid #3e352d; }
                        .sidebar-box ul li { color: #FFF; list-style-image: none; list-style-type: none; }
                        .sidebar-box ul { float: left; margin-left: 0px; padding: 0px; }
                        .sidebar-box ul li a:hover { background-color: #3e352d; border: 1px solid #473333; background-image: url(images/sidebar-hover.gif); background-repeat: no-repeat; background-position: 170px 8px; }
                        .sidebar-box h3 { font-size: 13px; color: #FFF; font-weight: normal; text-transform: lowercase; font-family: Trebuchet MS; float: left; display: block; width: 202px; padding-left: 10px; margin: 4px 0px 10px 0px; }
                        .sidebar-box2 h3 { font-size: 13px; color: #FFF; font-weight: normal; text-transform: lowercase; font-family: Trebuchet MS; float: left; display: block; width: 202px; padding-left: 10px; margin: 4px 0px 10px 0px; }

popatrz sobie w jego css, ale nieładnie kopiować od kogoś kod strony.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.