Webboard

Pełna wersja: Menu rozwijane - jak je zrobić w stylu ripz?
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
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ć?
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">
* {
margin0padding0;}
#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-familyFontAwesome;
}

.
main-menu, .fast-menu, .tfoot {
    
padding0 5%;
    
line-height1.4;
}

.
fast-menu a:link, .fast-menu a:visited {
    
padding1.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;
    
padding1.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 {
    
padding1em 1.2em;
    
font-size125%;
}

.
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 {
    
width270px;
    -
webkit-transitionall 0.7s ease 0s;
    -
moz-transitionall 0.7s ease 0s;
    -
o-transitionall 0.7s ease 0s;
    
transitionall 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"><class="icon-home"></iForum</a></li>
            <
li><a href="{$mybb->settings['bburl']}/search.php"><class="icon-search"></i> {$lang->toplinks_search}</a></li>
            <
li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><class="icon-question-sign"></i> {$lang->toplinks_help}</a></li>
            <
li><a href="{$mybb->settings['bburl']}/memberlist.php"><class="icon-group"></i> {$lang->toplinks_memberlist}</a></li>
            <
li><a href="#"><class="icon-book"></iKontakt</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=""><class="icon-search"></i></button>
                </
form>
            </
li>
        </
ul
zamień na taki:
Kod PHP:
<ul id="menu">
<
li><a href="{$mybb->settings['bburl']}/index.php"><class="icon-home"></iForum</a></li>
            <
li><a href="{$mybb->settings['bburl']}/search.php"><class="icon-search"></i> {$lang->toplinks_search}</a></li>
            <
li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><class="icon-question-sign"></i> {$lang->toplinks_help}</a></li>
            <
li><a href="{$mybb->settings['bburl']}/memberlist.php"><class="icon-group"></i> {$lang->toplinks_memberlist}</a></li>
            <
li><a href="#"><class="icon-book"></iKontakt</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=""><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 {
    
width270px;
    -
webkit-transitionall 0.7s ease 0s;
    -
moz-transitionall 0.7s ease 0s;
    -
o-transitionall 0.7s ease 0s;
    
transitionall 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 {
width270px;
-
webkit-transitionall 0.7s ease 0s;
-
moz-transitionall 0.7s ease 0s;
-
o-transitionall 0.7s ease 0s;
transitionall 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; }