Webboard

wersja skryptu MyBB:1.8
adres forum: http://www.fworld-t.zz.mu
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
Zrobił lub pomógł by ktoś mi zrobić rozwijane menu w tym stylu?
Ripz_theme ?

Proszę ja niestety tego nie ogarniam

Może ktoś krok po kroku napisać?

http://www.forumweb.pl/porady-i-tutorial...jane,48799

OK tylko ktoś by napisał gdzie te kody mam wrzucic?

Kod PHP:
<ul id="menu">
  <li><a href="#">Link 1</a>
    <ul>
      <li><a href="#">Link 1.1</a></li>
      <li><a href="#">Link 1.2</a></li>
      <li><a href="#">Link 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Link 3.1</a></li>
      <li><a href="#">Link 3.2</a></li>
      <li><a href="#">Link 3.3</a></li>
    </ul>
  </li>
</ul> 

to do header tak?

A to?:

Kod PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu rozwijane pionowe - demo</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#menu li {list-style: none;}
#menu, #menu ul {width: 160px;}
#menu ul {visibility: hidden; position: absolute; top: 0; left: 100%; padding-left: 1px;}
#menu li {padding-bottom: 1px; line-height: 0; position: relative;}
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #fff; background-color: #666;}
#menu li:hover a, #menu li:hover li:hover a {background-color: #333095;} 

Pierwszy kod wrzucasz do nagłówek - header, następnie drugi dodaj do global.css

Kod PHP:
#menu li {list-style: none;}
#menu, #menu ul {width: 160px;}
#menu ul {visibility: hidden; position: absolute; top: 0; left: 100%; padding-left: 1px;}
#menu li {padding-bottom: 1px; line-height: 0; position: relative;}
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; width: 140px; color: #fff; background-color: #666;}
#menu li:hover a, #menu li:hover li:hover a {background-color: #333095;} 

ok a z global.css muszę coś usunąć? czyli kody odpowiedzialne za obecne menu?
tak samo z header?

i coś jeszcze muszę zrobić czy tylko to żeby działało?

Raczej nic nie trzeba usuwać, bo to tworzy inne ID, spróbuj dodać i zobacz efekty.

Niestety coś nie tak jest

wyszło to tak:
[Obrazek: 311313213_wxhewae.png]

A chciałbym żeby było tak jak niżej "FORUM" itp tylko żeby było rozwijane

Tak ma mniej/więcej wyglądać (ale użyj kodów na menu poziome), to jest pionowe. Co do wyglądu tego, to już samemu należy modyfikować. Samo z siebie się nie dostosuje.

Aha ok to postaram się w to pobawic.

NIestety nie radze sobie

Może ktoś mi pomóc i ustawić w kodzie żeby było rozwijane menu?

Kod PHP:
.main-menu, .tfoot {
background:#252525; color:#fff; font-size:120%;
}

.main-menu [class^="icon-"] {
  font-family: FontAwesome;
}

.main-menu, .fast-menu, .tfoot {
    padding: 0 5%;
    line-height: 1.4;
}

.fast-menu a:link, .fast-menu a:visited {
    padding: 1.3em 1.8em;
    display:inline-block;
}

.fast-menu a:hover, .fast-menu a:active {
    background:#E6E6E6;
}

.main-menu li, .fast-menu li {
    display:inline;
}

.main-menu a:link, .main-menu a:visited, .tfoot a:link, .tfoot a:visited {
    color:#fff;
    padding: 1.2em 1.8em;
    display:inline-block;
}
.main-menu a:hover, .main-menu a:active, .main-menu .active, .tfoot a:hover, .tfoot a:active {
    background:#da1100;
}

.main-menu #search-icon {
    padding: 1em 1.2em;
    font-size: 125%;
}

.main-menu #search-icon:hover {
    background:#ff3322;
} 

ja niestety nie poradziłem sobie

Przyjrzałem się nieco sprawie i tak:
ripz.css, usuń (albo zmniejsz szerokość, width):

Kod PHP:
.searchbox .text-area:focus {
    width: 270px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
} 

A na końcu dodaj:

Kod PHP:
#menu li {list-style: none;}
#menu {padding: 1px 5%;line-height: 1.4;height: 60px; background:#252525; color:#fff; font-size:120%;}
#menu [class^="icon-"] {  font-family: FontAwesome;}
#menu ul {visibility: hidden; position: absolute; top: 100%; left: 0;}
#menu li {float: left; padding-right: 1px; position: relative;}
#menu li li {float: none; padding-top: 1px; width: 160px; }
#menu li:hover ul {visibility: visible;}
#menu a, #menu li:hover li a {display: block; font: 12px/30px verdana, sans-serif; text-decoration: none; padding: 0 10px; color: #FFF;  padding: 1.2em 1.8em;  display: inline-block;color: #fff; background-color: #252525;}
#menu li li a {color:#fff;    width: 120px;padding: 1.2em 1.8em;    display:inline-block;}
#menu li:hover a, #menu li:hover li:hover a {background:#ff3322;} 

Teraz przejdź do szablonu header (nagłówek) i ten kod:

Kod PHP:
<ul class="main-menu">
            <li><a href="{$mybb->settings['bburl']}/index.php"><i class="icon-home"></i> Forum</a></li>
            <li><a href="{$mybb->settings['bburl']}/search.php"><i class="icon-search"></i> {$lang->toplinks_search}</a></li>
            <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="icon-question-sign"></i> {$lang->toplinks_help}</a></li>
            <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="icon-group"></i> {$lang->toplinks_memberlist}</a></li>
            <li><a href="#"><i class="icon-book"></i> Kontakt</a></li>
            <li class="right">
                <form method="post" class="searchbox"  action="{$mybb->settings['bburl']}/search.php">
                    <input type="hidden" name="action" value="do_search" />
                    <input type="hidden" name="postthread" value="1" />
                    <input type="hidden" name="forums" value="all" />
                    <input type="hidden" name="showresults" value="threads" />
                    <input type="text" class="text-area" placeholder="{$lang->toplinks_search}..." name="keywords" value="" />
                    <button type="submit" class="button" value=""><i class="icon-search"></i></button>
                </form>
            </li>
        </ul> 

zamień na taki:

Kod PHP:
<ul id="menu">
<li><a href="{$mybb->settings['bburl']}/index.php"><i class="icon-home"></i> Forum</a></li>
            <li><a href="{$mybb->settings['bburl']}/search.php"><i class="icon-search"></i> {$lang->toplinks_search}</a></li>
            <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="icon-question-sign"></i> {$lang->toplinks_help}</a></li>
            <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="icon-group"></i> {$lang->toplinks_memberlist}</a></li>
            <li><a href="#"><i class="icon-book"></i> Kontakt</a></li>
            
  <li><a href="#">Link 1</a>
    <ul>
      <li><a href="#">Link 1.1</a></li>
      <li><a href="#">Link 1.2</a></li>
      <li><a href="#">Link 1.3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Link 2.1</a></li>
      <li><a href="#">Link 2.2</a></li>
      <li><a href="#">Link 2.3</a></li>
    </ul>
  </li>
<li class="right">
                <form method="post" class="searchbox"  action="{$mybb->settings['bburl']}/search.php">
                    <input type="hidden" name="action" value="do_search" />
                    <input type="hidden" name="postthread" value="1" />
                    <input type="hidden" name="forums" value="all" />
                    <input type="hidden" name="showresults" value="threads" />
                    <input type="text" class="text-area" placeholder="{$lang->toplinks_search}..." name="keywords" value="" />
                    <button type="submit" class="button" value=""><i class="icon-search"></i></button>
                </form>
            </li>
</ul> 

Efekt musi wyjść taki:
[Obrazek: 54ccabfdc86ec.png]

Ok działa, tylko usunięcie tego

Kod PHP:
.searchbox .text-area:focus {
    width: 270px;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
} 

nic nie daje i dalej jest takie jakie jest

rr92 napisał(a):Ok działa, tylko usunięcie tego

Kod PHP:
.searchbox .text-area:focus { width: 270px; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; }
nic nie daje i dalej jest takie jakie jest

Czyli co chcesz jeszcze zmienić?
BTW1:

Kod:
.searchbox .text-area {

    padding: 8px !important;

    border: solid 1px #222;

    margin: 9px 0 0 0;

}

to usunąłeś i straciłeś wygląd wyszukiwarki.
BTW2: Twój styl nie jest kompatybilny z MyBB 1.8.x.

chciałbym zmnienić żeby wyszukiwarka była na samym koncu tego paska

czyli ją przesunąć

W takim razie dodaj jeszcze

Kod:
#menu li.right { float: right; }

rr92

Doktorek29

rr92

Szogi1910

rr92

Snake_

rr92

Snake_

rr92

Snake_

rr92

Snake_

rr92

Snake_