Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Menu rozwijane - jak je zrobić w stylu ripz?

Inne  Założony przez  rr92.

26.01.2015, 20:39
#1
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ć?
Snake_ napisał 26.01.2015, 21:24:
Poprawiam tytuł wątku. [Obrazek: modnotice_howto.png]
26.01.2015, 21:12
#2
http://www.forumweb.pl/porady-i-tutorial...jane,48799
27.01.2015, 09:20 (Ten post był ostatnio modyfikowany: 27.01.2015, 09:21 przez rr92.)
#3
OK tylko ktoś by napisał gdzie te kody mam wrzucic?

<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?:
<!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;} 
27.01.2015, 12:58
#4
Pierwszy kod wrzucasz do nagłówek - header, następnie drugi dodaj do global.css
#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;} 
27.01.2015, 13:35 (Ten post był ostatnio modyfikowany: 27.01.2015, 13:35 przez rr92.)
#5
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?
27.01.2015, 14:53
#6
Raczej nic nie trzeba usuwać, bo to tworzy inne ID, spróbuj dodać i zobacz efekty.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
27.01.2015, 18:51
#7
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
27.01.2015, 21:37
#8
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.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
28.01.2015, 13:19
#9
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?
.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
31.01.2015, 11:18
#10
Przyjrzałem się nieco sprawie i tak:
ripz.css, usuń (albo zmniejsz szerokość, width):
.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:
#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:
<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:
<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]
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
31.01.2015, 12:54
#11
Ok działa, tylko usunięcie tego
.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 :)
31.01.2015, 15:25
#12
rr92 napisał(a):Ok działa, tylko usunięcie tego
.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:
.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.
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
31.01.2015, 17:22
#13
chciałbym zmnienić żeby wyszukiwarka była na samym koncu tego paska :) czyli ją przesunąć
31.01.2015, 17:27
#14
W takim razie dodaj jeszcze
#menu li.right { float: right; }
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.



Użytkownicy przeglądający ten wątek:

2 gości