Szukam Wysuwające menu z panelu

adres forum: http://topskill.xaa.pl/
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Szukam jakiegos skryptu najlepiej w samym HTML
aby po kliknięciu lub najechaniu (obojętnie) wysuwa się menu tak jak na cs-wojak.pl co najedziemy na np sklep i w tedy się wysuwa takie oto menu

Prosiłbym o dokładne wytłumaczenie bo jak próbuje to mi się forum sypie

Snake_ napisał 14.09.2014, 18:47:
Proszę uważać na słownictwo, to, że zakryjesz literki, nie znaczy, że nie wiemy o co chodzi. Radzę się pilnować, by uniknąć ostrzeżeń.

Google → wpisz "dropdown menu" - wyskoczy Ci setki wyników, wystarczy jeden jakiś dobry i będzie w porządku.

Chyba logiczne, że nie wszystko będzie zintegrowane z MyBB, bo są to głównie kody na zwykłe strony, np. HTML.
Trochę wkładu własnego - zapoznanie się z podstawami HTML/CSS (To w zupełności wystarczy) oraz struktura MyBB powinna być znajoma dla każdego webmastera.


Poradniki z MyBB.com:
a) http://community.mybb.com/thread-91978.html
b) http://community.mybb.com/thread-82696.html

A możesz mi pomóc w zamontowaniu tego bo tam http://cssmenumaker.com/menu/css3-drop-down-menu# trzeba pliki pobrać potem coś w css zmienić mi chodzi jedynie prosty kod HTML bez takich dziwnych bajerów bo ja zielony nawet nwm gdzie te pliki wrzucić

Style i szablony/style/twój styl/global.css - wrzuć css na sam koniec
Style i szablony/szablony/twój styl/nagłówek/header tam wrzuć kod html

HTML do header, CSS do np. global.css.

Mogę naprowadzić, lecz nie licz na gotowca - pokaż kod Twojego bieżącego menu.

Moje menu jest takie

<ul class="menu_top">
<li><a href="/index.php"><b><span class="najechanie">STRONA GŁÓWNA</span></a></b></a></li>
<li><a href="/memberlist.php"><b><span class="najechanie">UŻYTKOWNICY</span></a></b></a></li>
<li><a href="http://topskill.mybans.eu/ban_list.php"><b><span class="najechanie">AMXBANS</span></a></b></a></li>
<li><a href="http://kills.gameclan.pl/sklep/"><b><span class="najechanie">SKLEP 24/7</span></a></b></a></li>
<li><a href="/chatbox"><b><span class="najechanie">SHOUTBOX</span></a></b></a></li>
<li><a href="http://kills.gameclan.pl/staty/"><b><span class="najechanie">PSYCHOSTATS</span></a></b></a></li>
<li><a href="http://topskill.xaa.pl/staty/"><b><span class="najechanie">STATY</span></a></b></a></li>


</ul>

Próbowałem coś takiego ale jednak brzydko wygląda

<select>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="javascript">JavaScript</option>
</select>

select zupełnie nie pasuje na menu.


Pokaż jeszcze CSS tego menu

A gdzie to znaleźć ?

Tu masz gotowe menu, wystarczy wybrać jakie chcesz wkleić kod do odpowiednich miejsc i masz.
http://cssmenumaker.com/

Ta strona jest chyba płatna bo jak klikam w jakiś CSS to pisze 14$ i nic więcej

Jedyne co jest płatne, to zakładka CSS, a z tym to chyba sobie poradzisz, prawda?

http://cssmenumaker.com/free-css-menus
Tu masz darmowe

Kaj ty masz te darmowe -,- niestety nie poradzę

W sumie, to wiedziałem, że sobie nie poradzisz...

Więc ten raz pomogę...

ACP → Style i szablony → Style → Twój styl → Nowy arkusz → nazwa.css → zawartość wpisz:

/*

HOW TO CREATE A CSS3 DROPDOWN MENU [TUTORIAL]

"How to create a CSS3 Dropdown Menu [Tutorial]" was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com
http://vladimirkudinov.com

*/

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

/* Menu */
.menu {    
    height: 40px;
background: url(http://ifrag.xaa.pl/public/style_images/Spark3/triangles.png) repeat-x scroll center top #9f0401;
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;
border-radius: 0px;
line-height: 1;
font-family: "Lato" !important;
margin-bottom: 10px;
text-transform: uppercase;
}

.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}

/* Links */

.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;

    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);

    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }

.menu li:hover{ background: rgba(200,200,200,0.39);
color: #fff;         padding: 0px 0px;
    margin: 0px 0;}

/* Sub Menu */

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
z-index: 666;
    opacity: 0;
    
    background: #1f2024;

    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;

    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; }

.menu ul li {
    height: 0;
    overflow: hidden;
    

    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

.menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;

    border: none;
    border-bottom: 1px solid #353539;
}

.menu ul li:last-child a { border: none; } 


Natomiast:
ACP → Style i szablony → szablony → Twój szablon → Nagłowek → header zamień na:

<div id="login-box" class="login-popup">
            <div class="login-content">
            <h3>Zaloguj się! <a href="#"><img src="http://csproceder.pl/images/carbon/close_popup.png" class="btn_close" title="Close Window" alt="Close" /></a></h3>
          <form method="post" class="signin" action="member.php">
<input type="hidden" name="action" value="do_login" />
               <ul class="login-box-ul">
                <li style="margin-left: 110px;margin-bottom: 7px;">Nie masz konta? <a href="member.php?action=register">Zarejestruj się!</a></li>
                <li><label>Login</label> <input type="text" name="username" title="{$login_username}" value="Nazwa użytkownika" onfocus="if(this.value == 'Nazwa użytkownika') { this.value=''; }" onblur="if(this.value=='') { this.value='Nazwa użytkownika'; }" /></li>
                <li><label>Hasło</label> <input type="password" name="password" title="{$lang->login_password}" value="{$lang->login_password}" onfocus="if(this.value == '{$lang->login_password}') { this.value=''; }" onblur="if(this.value=='') { this.value='{$lang->login_password}'; }"/></li>
                <li style="margin-left: 110px;"><a href="member.php?action=lostpw">Zapomniałem hasła!</a></li>
                <li style="margin-left: 106px;margin-top: 4px;"><input type="checkbox" class="checkbox" name="remember" checked="checked" value="yes" /> <span style="padding: 1px 0 0 6px;position: absolute;">Zapamiętaj mnie</span></li>
               </ul>
          <div class="submit_login">
            <input class="button_submit-login" type="submit" value="Zaloguj" name="submit"/>
          </div>
          </form>
          </div>
        </div>
<a name="top" id="top"></a>
 <div class="belka_top-wrapper">
<div class="belka_top">
<div class="float_left">
<form action="search.php" method="post" id='search-box'><span id='search_wrap'>
<span style="float: right;margin-top: 5px;margin-right: 30px;">
<input type='submit' class="button_submit_gl" value=""/>
<input type="text" class="search_bg" id='main_search' name="keywords" onfocus="this.value = '';" value="Wyszukiwanie..." size='30' tabindex='6' />
<input type="hidden" name="action" value="do_search" />
<input type="hidden" name="forums" value="all" />
<input type="hidden" name="postthread" value="1" /></span>
</span>
</form>
<span class="zaawansowane_szukaj">
<a href="search.php" class="zaawansowane_szukanie"></a>
</span>
</div>
         <div style="float:right;">
          <div class="nawigacja_usera">
                 {$welcomeblock}
          </div>

     </div>
</div>
<br>
<div id="wrapper">
        <div id="header">
            <div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="images/spark_v3/logo.png" alt="images/spark_v3/logo.png" title="{$mybb->settings['bbname']}" /></a></div>
<div id="wrapper">


<br>
<br>
<br>
<br>
<ul class="menu">
 
    <li><a href="#">My dashboard</a></li>
    <li><a href="#">Likes</a></li>
   
    <li><a href="#">Uploads</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Documents</a></li>
 <li><a href="#">Views</a>
 
        <ul>
            <li><a href="#" class="documents">Documents</a></li>
            <li><a href="#" class="messages">Messages</a></li>
            <li><a href="#" class="signout">Sign Out</a></li>
        </ul>
 
    </li>
 
</ul>


        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            <navigation>
            {$board_messages}
                 <div class="content"> 


Wyglądać będzie mniej-więcej tak:

Wchodzisz w link : http://cssmenumaker.com/free-css-menus
Wybierasz jakiś obrazek z menu
potem masz takie coś jak "Download Source"