Horizontální menu Vyřešeno

Místo pro dotazy a rady ohledně programovacích jazyků (C++, C#, PHP, ASP, Javascript, VBS..) a tvorby webových stránek

Moderátor: Mods_senior

yela94
nováček
Příspěvky: 30
Registrován: březen 13
Pohlaví: Muž
Stav:
Offline

Horizontální menu  Vyřešeno

Příspěvekod yela94 » 29 bře 2013 19:05

Zdravim, dělám si web a mám horizontální menu přes CSS, a chtěl bych udělat z jedné položky další vysouvací menu .. například když najedu na položku O Messim, aby vyskočilo další menu vertikální kde budou na výběr třeba další dvě ...

kód HTML:

<div id="menu-box">
<ul id="menu" class="clearfix">
<li class="first"><a class="active" href="index.html">Home</a></li>
<li><a href="omessim.html">O Messim</a></li>
<li><a href="klub.html">Současný klub</a></li>
<li><a href="repre.html">Reprezentace</a></li>
<li><a href="uspechy.html">Úspěchy</a></li>
<li><a href="charakteristika.html">Charakteristika</a></li>
<li><a href="osobnizivot.html">Osobní život</a></li>
</ul>


</div></div>

kód CSS

#menu-box {background: #494949;width:930px;margin: 0 auto;border-style:solid;
border-width:thin;border-radius:3px;border-color:#474040;}
#menu {width:700px; margin: 0 auto;}

#menu li {
float: left;
display: inline;
list-style-type: none;
text-align: center;
}

#menu li a {
font-size: 16px;
font-style: normal;
text-decoration: none;
color: #FFF;
margin: 0 auto;
display: inline;
line-height: 35px;
padding: 0 11px;
border-right: 1px solid #C0082A;
}

#menu li.first a {border-left: 1px solid #C0082A;}

.clearfix:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
font-size: 0;
content: ' ';
}

Dík za rady
fsafas.jpg
Moje menu
Přílohy
fsa.jpg
Vysouvací
fsa.jpg (10.33 KiB) Zobrazeno 650 x

Reklama
d1amond
člen HW spec týmu
Elite Level 12
Elite Level 12
Příspěvky: 16119
Registrován: květen 08
Bydliště: České Budějovice
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod d1amond » 29 bře 2013 22:38

Nikdy neříkej, že to nejde, protože se najde někdo, kdo o tom neví a udělá to!
Chcete si nechat sestavit nový počítač?

yela94
nováček
Příspěvky: 30
Registrován: březen 13
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod yela94 » 29 bře 2013 22:39

já si umím najít tutorialy ale potřebuju poradit jak přepsat muj kód, nevyznám se v tom moc

d1amond
člen HW spec týmu
Elite Level 12
Elite Level 12
Příspěvky: 16119
Registrován: květen 08
Bydliště: České Budějovice
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod d1amond » 29 bře 2013 22:43

No tak když je umíš najít, proč podle nich nejdeš?
Třeba v Tvém menu nevidím onu důležitou, druhou úroveň seznamu?

Kód: Vybrat vše

<ul>
 <li></li>
 <li>
    <ul>
      <li></li>
    <ul>
 </li>
</ul>
Nikdy neříkej, že to nejde, protože se najde někdo, kdo o tom neví a udělá to!
Chcete si nechat sestavit nový počítač?

yela94
nováček
Příspěvky: 30
Registrován: březen 13
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod yela94 » 29 bře 2013 23:08

nevím jak to mám upravit abych ji tam měl

d1amond
člen HW spec týmu
Elite Level 12
Elite Level 12
Příspěvky: 16119
Registrován: květen 08
Bydliště: České Budějovice
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod d1amond » 29 bře 2013 23:13

Vem si jeden z těch linků co jsem poslal, napasuj to na svůj kód a uprav. Pokud nepochopíš, jak vnořit menu pomocí ul, li, tak studuj.
Nikdy neříkej, že to nejde, protože se najde někdo, kdo o tom neví a udělá to!
Chcete si nechat sestavit nový počítač?

yela94
nováček
Příspěvky: 30
Registrován: březen 13
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod yela94 » 29 bře 2013 23:38

<li><a href="omessim.html">O Messim</a></li>
<li><a href=#>1</a></li>
<li><a href=#>2</a></li>

ale co mám dopsat do css?

--- Doplnění předchozího příspěvku (29 Bře 2013 23:42) ---

d1amond píše:Vem si jeden z těch linků co jsem poslal, napasuj to na svůj kód a uprav. Pokud nepochopíš, jak vnořit menu pomocí ul, li, tak studuj.

já bych si to zvládl udělat kdybych to chtěl jako nový menu ale když to mám vložit do toho co už mám udělaný tak nevím co kam mám psát :D

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Horizontální menu

Příspěvekod CZechBoY » 30 bře 2013 00:02

pokud se nevyznáš ve SVÝM kodu tak je někde problém
stáhni notepad++ a přepiš ho znova, aby ses v něm vyznal

do css jednoduše napíšeš že v rozbaleným stavu bude viditelná část menu (ul) a ve shrnutým bude neviditelná
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

yela94
nováček
Příspěvky: 30
Registrován: březen 13
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod yela94 » 30 bře 2013 00:11

já se ve svým kódu vyznám ale nevím jak a kterou část tam mám zahrnout abych měl ten výsledek kterej chci, nemůžeš mě to napsat ?

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Horizontální menu

Příspěvekod CZechBoY » 30 bře 2013 00:15

tak můžu viď, ale pošli novej kod
je potřeba tam provést úpravu, která byla zmíněna výše d1amondem
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW

yela94
nováček
Příspěvky: 30
Registrován: březen 13
Pohlaví: Muž
Stav:
Offline

Re: Horizontální menu

Příspěvekod yela94 » 30 bře 2013 00:58

teď nechápu jakou, celý csska a html jsem dal do příspěvku to nestačí ?

Uživatelský avatar
CZechBoY
Master Level 9.5
Master Level 9.5
Příspěvky: 8813
Registrován: srpen 08
Bydliště: Brno
Pohlaví: Muž
Stav:
Offline
Kontakt:

Re: Horizontální menu

Příspěvekod CZechBoY » 30 bře 2013 10:51

no však pošli nový předělaný html podle toho co ti radil d1amnod
PHP, Nette, MySQL, C#, TypeScript, Python
IntelliJ Idea, Docker, Opera browser, Linux Mint
iPhone XS
Raspberry PI 3 (KODI, Raspbian)
XBox One S, PS 4, nVidia GeForce NOW


Zpět na “Programování a tvorba webu”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 2 hosti