Inne Przeniesienie menu między stylami

wersja skryptu MyBB:1.6.14
adres forum:kbhl.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
Witam, mamy dwa szablony:
1. 'ripz' https://www.sendspace.com/file/9k4bg1
2. http://mods.mybb.com/view/apart-leaf
Prosiłbym uprzejmie, gdyby ktoś znalazł czas, o skopiowanie właściwego skryptu i odpowiednich elementów graficznych potrzebnych do 'przerzucenia' paska menu ze stylu nr 1 do stylu nr 2 oraz opisanie pokrótce, co gdzie wrzucić, wkleić, wpisać. Prośba dość nietypowa, ale naprawdę dla mnie ważna, będę bardzo wdzięczny z pomoc

Tutaj pomagamy z problemami, a nie jest to problem, tylko prośba.


Wytłumaczę: Kopiujesz HTML odpowiadający za to, wrzucasz do Twojego stylu. Teraz kolej na CSS, szukasz użytych nazw/klas/id w kodzie HTML i je okpiujesz.

Możesz też użyć: http://grafifor.pl/Temat-html5-css3-js-r...pdown-menu

Download z tego linku jest ważny? Gdzie go wrzucić?

W sumie wystarczą Ci tylko kody, ale jeśli chcesz mieć ikonki, to wrzuć na FTP, a potem w kodzie podaj prawidłową ścieżkę.

Te ikonki to Font-Awesome, nie ma ich w paczce do pobrania. Jak zainstalować Font-Awesome dowiesz się tutaj: https://webboard.pl/wiki.php?najatwiejsz...stylu.html

W poradniku autora napisane jest

Podmienić hrefy i nazwy lików na te z MyBB

Co to znaczy ?

Podstawowa wiedza na temat HTML się kłania...

http://www.w3schools.com/tags/att_a_href.asp

<body&nbsp;class="body">
&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Container&nbsp;START&nbsp;-->
&nbsp;&nbsp;&nbsp;&nbsp;<section&nbsp;class="container">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Menu&nbsp;START&nbsp;-->
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<nav&nbsp;class="css3-menu"><ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#home"&nbsp;class="active"><i&nbsp;class="fa&nbsp;fa-home"></i></a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="hoverli&nbsp;menu-li"><a href="#projekty"><i&nbsp;class="fa&nbsp;fa-briefcase"></i>&nbsp;Projekty&nbsp;<i&nbsp;class="fa&nbsp;fa-angle-down"></i></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="dropdown">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt01"><i&nbsp;class="fa&nbsp;fa-heart"></i>&nbsp;Lubię&nbsp;to&nbsp;menu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt02"><i&nbsp;class="fa&nbsp;fa-folder-open"></i>&nbsp;Projekt&nbsp;Dwa</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt03"><i&nbsp;class="fa&nbsp;fa-flask"></i>&nbsp;Eksperyment</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#uslugi"><i&nbsp;class="fa&nbsp;fa-cogs"></i>&nbsp;Usługi</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#galeria"><i&nbsp;class="fa&nbsp;fa-picture-o"></i>&nbsp;Galeria</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#faq"><i&nbsp;class="fa&nbsp;fa-question-circle"></i>&nbsp;FAQ</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="menu-li"><a href="#kontakt"><i&nbsp;class="fa&nbsp;fa-envelope"></i>&nbsp;Kontakt</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="float-right"><a href="#right"><i&nbsp;class="fa&nbsp;fa-user"></i>&nbsp;Right</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li&nbsp;class="hoverli&nbsp;resp-menu"><a href="#resp-menu"><i&nbsp;class="fa&nbsp;fa-bars"></i>&nbsp;Menu&nbsp;<i&nbsp;class="fa&nbsp;fa-angle-down"></i></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ul&nbsp;class="dropdown">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#home"&nbsp;class="active"><i&nbsp;class="fa&nbsp;fa-home"></i>&nbsp;Home</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt01"><i&nbsp;class="fa&nbsp;fa-heart"></i>&nbsp;Lubię&nbsp;to&nbsp;menu</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt02"><i&nbsp;class="fa&nbsp;fa-folder-open"></i>&nbsp;Projekt&nbsp;Dwa</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#projekt03"><i&nbsp;class="fa&nbsp;fa-flask"></i>&nbsp;Eksperyment</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#uslugi"><i&nbsp;class="fa&nbsp;fa-cogs"></i>&nbsp;Usługi</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#galeria"><i&nbsp;class="fa&nbsp;fa-picture-o"></i>&nbsp;Galeria</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#faq"><i&nbsp;class="fa&nbsp;fa-question-circle"></i>&nbsp;FAQ</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li><a href="#kontakt"><i&nbsp;class="fa&nbsp;fa-envelope"></i>&nbsp;Kontakt</a></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ul></nav>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Menu&nbsp;END&nbsp;-->
&nbsp;&nbsp;&nbsp;&nbsp;</section>
&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;Container&nbsp;END&nbsp;-->
</body> 


Możecie podać przykład, jak zamienić ? Przez to idiotyczne nbsp juz sie pogubilem (usunalem tylko nbsp miedzy a i href)

Pierw zgraj kod do notepad++ a dopiero potem na swoje forum. nbsp dodało się automatycznie, a tak nie może być.

I mam nadzieję ostatnie moje pytanie, mianowicie, w którym miejscu wkleić ten kod:

body class="body">
    <!-- Container START -->
    <section class="container">
        <!-- Menu START -->
        <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>
        <!-- Menu END -->
    </section>
    <!-- Container END -->
</body> 


w ten header

<div id="container">
 

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

            <div id="panel">
                <div class="upper"><!-- This div(class="upper") is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
                    <div class="wrapper">
                        <ul class="menu top_links">
 
                            <li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>
                            <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>
                            <li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">{$lang->toplinks_calendar}</a></li>
                                                         

</ul>
                        {$welcomeblock}
            </div>
        </div>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                <navigation>
            {$board_messages}
                <br /> 


tak, żeby mi to ładnie śmigało

<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>
        <!-- Menu END -->
    </section> 


dodaj po <div id="container">

Niestety, wygląd na moim forum różni się od oryginału, zamieszczonego w linku, który podany został na początku (załącznik). Chciałbym prosić o pomoc, na temat tego, jak naprawić ten pasek (przede wszystkim chyba trzeba go zwężyć)

global.css:

.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    background: #b71ae4;
    color: #fff;
} 


zamień na:

.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
    background: #b71ae4;
    color: #fff;
    display: inline;
    padding: 18px;
} 


Wielkie dzięki,
kolejna sprawa- w oryginale po prawej stronie paska jest chyba rozwijana opcja panelu uzytkownika? Jak można dodać ją także do mojego menu?

JS, czyli:

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

    });
    </script> 


zamieniasz na:

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


w CSS odszukaj:

.dropdown{
    display: none;
    position: absolute;
    left: 0;
    top: 36px;
    background: #444;
    font-size: 14px;
}
.dropdown>li{
    display: block;
    list-style: none;
}
.dropdown>li>a:link, .dropdown>li>a:visited{
    display: block;
    color: #EFEFEF;
    width: 140px;
    text-decoration: none;
    padding: 3px 15px;
    border-bottom: dashed 1px #676767;
}
.dropdown>li>a:hover, .dropdown>li>a:active{
    background: #b71ae4;
    color: #fff;
    border-bottom: solid 1px #b71ae4;
} 


zaraz po tym dodaj:

.dropdown2 {
    display: none;
    position: absolute;
    left: 0;
    top: 36px;
    background: #444;
    font-size: 14px;
}
.dropdown2>li{
    display: block;
    list-style: none;
}
.dropdown2>li>a:link, .dropdown2>li>a:visited{
    display: block;
    color: #EFEFEF;
    width: 140px;
    text-decoration: none;
    padding: 3px 15px;
    border-bottom: dashed 1px #676767;
}
.dropdown2>li>a:hover, .dropdown2>li>a:active{
    background: #b71ae4;
    color: #fff;
    border-bottom: solid 1px #b71ae4;
} 


No i to już część główna została zrobiona, zostało nam jedynie działanie:
Tam, gdzie chcesz, by było to wysuwane menu, czyli masz taki kod:

<li class="menu-li"><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li> 


po menu-li dopisz (oddzielając spacją) hoverli2