Webboard

Pełna wersja: Jak mogę zrobić taką zakładkę gdy na nią kliknę rozsuwają się w dół np 2 inne?
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.6.14
adres forum:brak
na czym polega problem (screen, opis, komunikaty, nazwa i wersja wtyczki):

Jak mogę zrobić taką zakładkę gdy na nią klikne rozsuwają się w dół np 2 inne?
Nie,wklejam kod i się robią obok
a ja chce własnie o tak [u góry]
http://evogame.com.pl/
No to jest to, co napisałem, wystarczy dobrze tego użyć. ;)

http://grafifor.pl/Temat-html5-css3-js-r...pdown-menu
sorki ale nie ogarniam,byś mi mógł teraz takiego małego tuta zrobić?
To jest tutorial. ;)

DO CSS:
Kod PHP:
.float-right{float:right;}

/* CSS3 menu */
.css3-menu{
    
background#323232;
    
margin0 0 0 -4px;
}
.
css3-menu>ul{
    
line-height40px;
    
padding0 0 0 4px;
}
.
css3-menu>ul>li{
    list-
stylenone;
    
displayinline;
    
margin0 0 0 -4px;
    
positionrelative;
}
.
css3-menu>ul>li>a>i{
    
font-size14px;
}
.
css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
    
displayinline-block;
    
padding5px 18px;
    
height40px;
    
color#EFEFEF;
    
text-decorationnone;
}
.
css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    
background#b71ae4;
    
color#fff;
}
.
dropdown{
    
displaynone;
    
positionabsolute;
    
left0;
    
top36px;
    
background#444;
    
font-size14px;
}
.
dropdown>li{
    
displayblock;
    list-
stylenone;
}
.
dropdown>li>a:link, .dropdown>li>a:visited{
    
displayblock;
    
color#EFEFEF;
    
width140px;
    
text-decorationnone;
    
padding3px 15px;
    
border-bottomdashed 1px #676767;
}
.
dropdown>li>a:hover, .dropdown>li>a:active{
    
background#b71ae4;
    
color#fff;
    
border-bottomsolid 1px #b71ae4;
}
.
css3-menu>ul>li.resp-menu{displaynone !important;}

/* Media Queries */
@media only screen and (min-width 580px) and (max-width 800px){
    
/* CSS3 menu */
    
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        
padding0 12px;
    }
    .
dropdown{
        
top30px;
        
font-size13px;
    }
    .
dropdown>li>a:link, .dropdown>li>a:visited{
        
padding0 10px;
    }
}
@
media only screen and (min-width 1px) and (max-width 579px){
    
/* CSS3 menu */
    
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
        
padding0 12px;
    }
    .
dropdown{
        
top28px;
        
font-size12px;
    }
    .
dropdown>li>a:link, .dropdown>li>a:visited{
        
width100px;
        
padding0px 10px;
        
line-height25px;
    }
    .
css3-menu>ul>li.menu-li{displaynone;}
    .
css3-menu>ul>li.resp-menu{displayinline !important;}

do headerinclude:
Kod:
<script type="text/javascript">
    $(document).ready(function () {
        $(".hoverli").hover(
      function () {
         $('.dropdown').fadeIn('medium');
      },
      function () {
         $('.dropdown').fadeOut('medium');
      }
    );

    });
    </script>
(+ zakładam, że masz bibliotekę jQuery).

i w miejsce, gdzie ma się wyświetlać.
Kod:
<nav class="css3-menu"><ul>
            <li class="menu-li"><a href="#home" class="active"><i class="fa fa-home"></i></a></li>
            <li class="hoverli menu-li"><a href="#projekty"><i class="fa fa-briefcase"></i> Projekty <i class="fa fa-angle-down"></i></a>
                <ul class="dropdown">
                    <li><a href="#projekt01"><i class="fa fa-heart"></i> Lubię to menu</a>
                    <li><a href="#projekt02"><i class="fa fa-folder-open"></i> Projekt Dwa</a>
                    <li><a href="#projekt03"><i class="fa fa-flask"></i> Eksperyment</a>
                </ul>
            </li>
            <li class="menu-li"><a href="#uslugi"><i class="fa fa-cogs"></i> Usługi</a></li>
            <li class="menu-li"><a href="#galeria"><i class="fa fa-picture-o"></i> Galeria</a></li>
            <li class="menu-li"><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li>
            <li class="menu-li"><a href="#kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li>
            <li class="float-right"><a href="#right"><i class="fa fa-user"></i> Right</a></li>
            <li class="hoverli resp-menu"><a href="#resp-menu"><i class="fa fa-bars"></i> Menu <i class="fa fa-angle-down"></i></a>
                <ul class="dropdown">
                    <li><a href="#home" class="active"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#projekt01"><i class="fa fa-heart"></i> Lubię to menu</a>
                    <li><a href="#projekt02"><i class="fa fa-folder-open"></i> Projekt Dwa</a>
                    <li><a href="#projekt03"><i class="fa fa-flask"></i> Eksperyment</a>
                    <li><a href="#uslugi"><i class="fa fa-cogs"></i> Usługi</a></li>
                    <li><a href="#galeria"><i class="fa fa-picture-o"></i> Galeria</a></li>
                    <li><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li>
                    <li><a href="#kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li>
                </ul>
            </li>
        </ul></nav>

Dodatkowo zostały użyte ikony font-awesome, więc to też: https://webboard.pl/wiki.php?najatwiejsz...stylu.html