Menu hover

pecado · Napísal **pecado**: 21.03.2013 11:08 | Menu hover

Zdravim,

viete mi poradit ako dosiahnut menu ake je na tejto stranke: TU
Resp. ci uz niekde nie je vytvorene podobne ktore by som len upravil.

Vdaka

BX · Napísal BX: 21.03.2013 11:46 | Menu hover

http://jqueryui.com/menu/

walther · Napísal **walther**: 21.03.2013 12:05 | Menu hover

Menu robiť cez js? Neviem, či je to akurát najšťastnejší nápad...

BX · Napísal BX: 21.03.2013 12:34 | Menu hover

Menu cez javascript je zlé, hej? Som veľmi zvedavý na dôvvod.

walther · Napísal **walther**: 21.03.2013 13:11 | Menu hover

To tu musím písať naozaj už takéto základy? Hlavne u teba BX ma to prekvapuje... Za všetky dôvody uvediem ten najzákladnejší - skús porozmýšľať, čo sa stane, pokiaľ má užívateľ vypnutý javascript. V tom lepšom prípade rozbitá stránka a úplne zbytočne. Stačilo by použiť obyčajné css a mal by si podporu pre všetky zariadenia a v každom prípade... Nieee, radšej drbneme do stránky ďalší javascript, je to rýchlejšie hotové a nemusíme sa ani nič učiť

BX · Napísal BX: 21.03.2013 14:02 | Menu hover

Ja som práve od teba čakal rozumnejší dôvod, ako túto hlúposť.
Za prvé - nie sme v roku päť, aby sme robili statické stránky len pomocou html/css. Dnes už js vypnutý nikto nemá a kto má, ten internet používať plnohodnotne nemôže a veľmi rýchlo si to rozmyslí.

Za druhé: Že smartfóny? No hej, kvôli tomu sa zosereme a prejdeme do roku päť. Aj väčšina prehliadačov na chytrých mobiloch už podporuje js. Ideálne sa ale robia mobilné verzie webov, ak tak veľmi chceš.

Argumentu "čo keď má niekto vypnutý js" je archaizmus, vymysli si lepší.

walther · Napísal **walther**: 21.03.2013 14:32 | Menu hover

Citácia:

Dnes už js vypnutý nikto nemá
Že smartfóny? No hej, kvôli tomu sa zosereme a prejdeme do roku päť

Že ja tu vôbec strácam čas...

js = moderná doba
css = zastaralý rok 5

Good job

Hentaké menu ako chce zakladateľ témy sa dá bez problému urobiť v css za pár minút a bude vyzerať rovnako natoľko, že nebudeš vedieť povedať, ktoré bolo robené ako...
V tomto prípade je JS maximálne zbytočné, budeš závislý od knižnice tretej strany, zvýšiš zbytočne počet requestov a náročnosť stránky, a odrežeš všetkých, ktorí js nemajú zapnuté. Naštýlovať to musíš tak či tak v css.
Takéto menu nemá s dynamickosťou stránky nič spoločné, osviež si trošku pojmy...

Ale musím ti uznať jednu vec, naozaj opisuješ modernejší prístup k tvorbe. SERME NA NICH, veď väčšine to pôjde hádam ok, načo strácať čas učením sa vecí, keď stačí použiť $("#menu").menu();

BX · Napísal BX: 21.03.2013 15:17 | Menu hover

Prečo nečítaš, čo píšem?

BX píše:

nie sme v roku päť, aby sme robili statické stránky len pomocou html/css.

walther píše:

a odrežeš všetkých, ktorí js nemajú zapnuté.

Vypnem si js a gmail aj facebook ma pošle do riti. To mi je teda prístup, mal by si im to ísť vytmaviť

walther píše:

sa dá bez problému urobiť v css za pár minút a bude vyzerať rovnako natoľko, že nebudeš vedieť povedať, ktoré bolo robené ako..

walther píše:

zvýšiš zbytočne počet requestov a náročnosť stránky

Aj tu platí, že kód sa robí pre ľudí. Cez js nič dramaticky nezhorším a je to extrémne jednoduché.

Slovo "dynamické" som nikde nepoužil.
A áno, na čo sa učiť debiliny, keď to trebárs ani nepotrebuje? On chce menu na stránku. Tak ho nepošlem učiť sa css, ale ponúknem najjednoduchšie riešenie.
Aha

pecado píše:

Resp. ci uz niekde nie je vytvorene podobne ktore by som len upravil.

Kto sa chce programovaním živiť, veľmi rád si prečíta niečo o efektivite jednotlivých riešení.

F3RY · Napísal **F3RY**: 21.03.2013 15:56 | Menu hover

Ja suhlasim s BX. Dnes uz JS nema vypnuty nikto. Pre smartfony nieje problem nadefinovat vlastny styl.
K teme: To menu ti stacit spravit v CSS, nieje to nic zlozite. http://www.jakpsatweb.cz/leve-menu.html

HAE07 · Napísal **HAE07**: 21.03.2013 16:14 | Menu hover

ked uz sa tu riesili smartfony, tak pridam len moju skusenost. vyskakovacie menu cisto cez hover mi nefungovalo na starsom androide, bolo treba osetrit cez JS kliknutie. ios pozna aj hover, vykona ho po prvom kliknuti na menu

shaggy · Napísal **shaggy**: 21.03.2013 19:32 | Menu hover

Citácia:

nie sme v roku päť, aby sme robili statické stránky len pomocou html/css.

Takí experti, ako ty, nám dennodenne chodia na pohovor do firmy. A bohužiaľ, je taký nedostatok kvalitných ľudí, že toho "najlepšieho" z najhorších prijmeme a ja s nim potom musím robiť - a to je čisté utrpenie.
A ťahať kvôli jednoduchému menu jquery + jquery UI na stránku? Ďakujem, neprosím.

Väčšina vyskakovacích menu sa dá urobiť iba cez html/css, pre mobily by som to upravil tak, aby vôbec nebolo vyskakovacie (to je na mobile otrava a totálne nepoužiteľné).

BX · Napísal BX: 21.03.2013 20:09 | Menu hover

Halóóó, to tu naozaj nikto nečíta požiadavky?!

pecado píše:

Zdravim,

viete mi poradit ako dosiahnut menu ake je na tejto stranke: TU
Resp. ci uz niekde nie je vytvorene podobne ktore by som len upravil.

Vdaka

Naozaj sa tu chceš baviť o tom, s akými trdlami ty pracuješ? Mne je u riti, že sa to dá aj lepšie, efektívnejšie, profesionálnejšie...
Keď napíšem algoritmus v C, niekto ma zdrbe, že prečo tam nemám paralelné bloky, keď sa tam dajú dať. Dorobím ich tam a ďalší ma zdrbe, že už keď to mám paralelne, mohol som to hodiť priamo na GPU. A pritom potrebujem len počítať faktoriál do 40.
Analogicky, keď mám svoju vlastnú maličkú stránku, kde príde 10 ľudí denne a z toho jeden som ja a druhý kamoš, tak sa nemusím trápiť s debilným menu a prasknem tam to najjednoduchšie, pričom viem, že to možno nie je najlepšie, ale stále dobré riešenie.
A keď sa mi traffic zvýši na neuveriteľných 30 ľudí denne, tak začnem uvažovať nad upgradom.

Riešite to tu jak babky na blšom trhu, obhajujete si css a pri tom tu ešte ani jeden z vás nedal alternatívu k tomu jquery. Pomôžte, ak viete!

walther · Napísal **walther**: 21.03.2013 20:20 | Menu hover

Hej, tu c-geometricke-utvary-vt141056.html?hilit=pyramida si ukázal, ako ti je efektivita u prdeli. Tam si sa dohadoval, hádzal linky a tu si za boha nedokážeš priznať chybu. Ja som tam ustúpil, ty sa tu budeš ruvať do krvi len aby si dokázal svoju pravdu. Bohužiaľ ju tentokrát nemáš. To, že vo svojich "požiadavkách" neuviedol, či sa tomu chce venovať profesionálnejšie alebo že koľko mu záleží na efektivite, neznamená, že tu budeš vypúšťať nezmysly a kódy "len aby to fungovalo", však neskôr to možno prerobí... Nečíta tieto témy len on, je to verejné fórum a pokiaľ ostatní uvidia tvoje "rady" na túto tému, budú sa zas učiť len kraviny a rozširovať to ďalej. Takže prosím ťa, nedoťahuj sa tu, keď ti to je u prdele a venuj sa ďalej svojim pyramídkam, ktoré ťa v škole dobre naučili

BX · Napísal BX: 21.03.2013 20:43 | Menu hover

walther píše:

Nečíta tieto témy len on, je to verejné fórum

A práve preto sem svoj názor píšem. Dobre, píšem ho trochu drzo a arogantne, to priznávam

walther píše:

a pokiaľ ostatní uvidia tvoje "rady" na túto tému, budú sa zas učiť len kraviny a rozširovať to ďalej.

Alebo si prečítajú aj diskusiu k tomu a rozhodnú sa, či to potrebujú rýchlo a jednoducho, alebo to potrebujú mať nadupané jak sviňa.

Okrem toho, ty si ma prvý začal ťahať za slovíčka a to nie je dobre, ja sa rád hádam

(ehm... diskutujem)

(k tomu ostatnému sa nebudem vyjadrovať, lebo to by zas dopadlo)

walther · Napísal **walther**: 21.03.2013 21:17 | Menu hover

Nejde o to, že ťa chytám za slovíčka.. Celá tvoja rada spočívala v tom, že si mu dal link na jquery (čo je už z princípu blbosť v tomto prípade). Vieš vôbec, v čom konkrétne má problém? Hento jquery menu rieši jedinú vec - vyskakovanie položiek. Čo ak len nevie, ako to naštýlovať?
Btw, vôbec by som to nerozvádzal ďalej, keby si ty neprovokoval s tým tvojím "daj dôvod, to som zvedavý"...

BX · Napísal BX: 21.03.2013 21:47 | Menu hover

Ja som bol vážne zvedavý, či vytiahneš tú sprostosť, že "čo keď niekto nemá zapnutý javascript", alebo napíšeš niečo rozumné.

A nerozvádzal, no lebo tam má kód, ktorý keď skopíruje, tak má presne také menu, ako chce. Ak by ho nevedel upraviť, spýta sa ďalej, veď na to je tu.

eMp · Napísal **eMp**: 21.03.2013 22:55 | Menu hover

pecado píše:

viete mi poradit ako dosiahnut menu ake je na tejto stranke: TU

Niekde som uz videl tutorial na taketo menu, ale neviem to najst. Cize potrebujes drop-down menu s komentarom/obrazkom alebo ako to nazvat.

Nasiel som akurat toto. Dufam, ze ti to trochu pomoze. Samozrejme mozes preskumat aj ten tvoj web.
http://interval.cz/clanky/vertikalni-menu-s-komentari/
http://www.htmldrive.net/items/show/240 ... easer.html

pecado · Napísal autor témy **pecado**: 22.03.2013 14:52 | Menu hover

Dik pani za rady.. Aj moja chyba zrejme ze som to nenapisal lepsie

Rozmyslal som hned o CSS. Nasiel som jedno riesenie...

HTML:

Kód:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="menu">
   <div class="polozka">
      <div class="zalozka"><a href="#">Položka A</a></div>
         <div class="ramecek">
            <div class="telo">
               <p><img alt="" src="smile.jpg" />TEXT</p>
               <p>TEXT TEXT</p>
            </div>
         </div>
      </div>
   
   <div class="polozka">
      <div class="zalozka"><a href="#">Položka B</a></div>
         <div class="ramecek">
<div class="telo">
<p><img alt="" src="" />TEXT </p>
<p>TEXT </p>
</div>
</div>
</div>
</div>
</body>
</html>

CSS:

Kód:

#menu 
{
background: red;
position: relative;
top: 20;
left: 20;
height: 90%; 
width: 90%; 
}
#menu .polozka
{
float: none; 
}
#menu .zalozka
{
width: 150px; 
background: green;
margin: 0 0 0 0;
padding: 0;
font-size: 20px;
}
#menu .zalozka a
{
color: white; 
text-decoration: none;
}
#menu .ramecek
{
position: absolute;
top: 0px; 
left: 150px;
width: 600px; 

padding: 10px; 
visibility: hidden; 
background: #000000; 
}
#menu .telo
{
overflow: auto; 
height: 150px;
background: orange;
padding: 5px 5px; 
text-align: justify; 
}
#menu .telo img
{
float: right;
margin: 0 1em .5em 0;
border: solid #666 1px;
}

#menu .polozka
{
behavior: url(hovermenu.htc); /* IE */
}

#menu .polozkaHover .ramecek,
#menu .polozka:hover .ramecek
{
visibility: visible;
}

#menu .polozkaHover .zalozka,
#menu .polozka:hover .zalozka
{
background: #caf;
} 

Comu nerozumiem v tom CSS je od tohto: "#menu .polozkaHover .ramecek," az po koniec.

..
Vysvetlite mi to prosim?
Tie nastavenia hodnot si nevsimajte nie je to upravene, je to len na skusku

Vdaka

walther · Napísal **walther**: 22.03.2013 15:04 | Menu hover

Pri písaní css môžeš špecifikovať pravidlá, ktoré platia pre viac elementov naraz. Syntax je úplne primitívna...

Kód:

#element1, #element2, #element3 { pravidla }

Samozrejme sa nemusíš odkazovať na jednotlivé elementy, môžeš uvádzať typy (span, b, div...) alebo triedy (.polozka, .menuItem...) a samozrejme všemožné kombinácie...

Pokiaľ "veci" pred zátvorkami nie sú oddelené čiarkami, znamená to, že bližšie špecifikuješ, v tvojom prípade

Kód:

#menu .polozkaHover .zalozka

Nájde element s ID menu, pod tým nájde všetky položky s triedou polozkaHover a v týchto položkách nájde všetky elementy s triedou ramecek. Na tieto elementy "ramecek" aplikuje dané pravidlá.
Inými slovami by to mohlo vyzerať napríklad takto:

Kód:

   <div id="menu">
        <div class="polozkaHover">
             <div class="ramecek">
                     AZ MY RAMECKY BUDEME NASTYLOVANE
             </div>
        </div>
   </div>
   <div class="ramecek">
         JA NASTYLOVANY NEBUDEM :(((
   </div>

Daným zápisom vlastne len bližšie špecifikuješ, ktoré elementy s triedou "ramecek" myslíš. Druhý div s "ramecek" nie je vnorený do menu->polozkaHover, teda naň sa pravidlo už nevzťahuje.

Dá sa to z tohto pochopiť? Písal som to trochu v rýchlosti, tak hádam som nepopísal blbosti :lol:

pecado · Napísal autor témy **pecado**: 22.03.2013 15:12 | Menu hover

Paradicka

, dik moc, si pan!
Jasne ze sa to da pochopit

..

pecado · Napísal autor témy **pecado**: 23.03.2013 14:29 | Menu hover

Este otazka

Kedze v tom CSS mam nastavene toto:

Kód:

#menu .ramecek
{
position: absolute;
top: 0px; 
left: 150px;
width: 600px; 

Tak sa to vyskakovacie "okno" zobrazuje stale na jednom mieste. Ked som zrusil top tak sa to uz posuvalo ale bolo to o polozku nizsie (obrazok)

Ako to nastavim aby sa mi to zobrazovalo vedla polozky na ktorej je mys?

Vdaka

HAE07 · Napísal **HAE07**: 23.03.2013 14:48 | Menu hover

nadradenemu prvku daj position relative. a vzdy sa ti pozicia bude ratat od prvku, na ktory ukazujes

pecado · Napísal autor témy **pecado**: 25.03.2013 9:50 | Menu hover

To: HAE07. Rozumiem tomu co mi vravis ale nech skusam ako skusam tak mi to stale nejde :/...

walther · Napísal **walther**: 25.03.2013 9:57 | Menu hover

Keď "nejde", musíš dať živú ukážku....

pecado · Napísal autor témy **pecado**: 27.03.2013 10:52 | Menu hover

No davam to do nadradeneho v tom css vyssie, teda do: "menu .polozka" a "menu. zalozka". Skusal som do oboch naraz, skusal som po jednom, nejde to ani tak. Napisal som to velmi divne ale snad ma chapes

HAE07 · Napísal **HAE07**: 27.03.2013 11:37 | Menu hover

http://jsfiddle.net/q8jKu/
doplnil som do .polozka position relative a ide to bez problemov. pouzity kod je tvoj

pecado · Napísal autor témy **pecado**: 27.03.2013 12:02 | Menu hover

Velke diky

Chyba bola v tom ze ja som tam predtym zrusil v .ramecek suradnicu top a ked som potom nastavoval v .polozka position relative tak to neslo..
Este raz dik

Menu ide takze problem mam vyrieseny. (temu mozte lock)
Len este tak na okraj... Dalo by sa to vyriesit aj jednoduchsim sposobom? Myslim v tom CSS.

pecado · Napísal autor témy **pecado**: 28.03.2013 14:53 | Menu hover

Skusal som to spravit trochu jednoduchsie, no neviem preco sa mi nezobrazi "telo" ked ukazem na polozku

Kód:

<body>
<div id="menu">
   <div class="polozka"><a href="#">Polozka 1</a></div>
      <div class="telo">text telo </div>
</div>
</body>

Kód:

#menu
{
position: relative;
width: 250px;
height: auto;
background:#FF0066;
}

#menu .polozka
{
position: relative;
float: none;
width: 200px;
background: #0033CC;
}
#menu .polozka a
{
text-decoration: none;
color: #FFFFFF; 
}
#menu .polozka:hover
{
background: #FFFF00;
}

#menu .telo
{
background: #666666;
position: absolute;
top: 0px;
left: 300px;
width: 300px;
visibility: hidden;
}

#menu .polozka:hover .telo,
#menu .polozkaHover .telo
{
visibility: visible;
}

Tipujem ze to bude zas daka chyba ktoru vyriesite za 5 sekund ale ja na to nepridem do zajtra

HAE07 · Napísal **HAE07**: 28.03.2013 20:19 | Menu hover

sice som sa prave zobudil, ale ak vidim spravne, tak v dive .polozka nemas ziadne .telo. cize zapis v css #menu .polozka:hover .telo je na nic

pecado · Napísal autor témy **pecado**: 28.03.2013 22:06 | Menu hover

zobudil

som to vedel ze to bude daka nepozornost

vdaka!

Menu hover

Menu hover

Podobné témy

hover menu

hover menu

Hover na menu

Horizontalne Hover menu

hover

hover efekt

Obrázkové hover

navigacne menu - sek.menu

neukaze mi hover

mouse hover galeria

mozno komplikovany hover

nastylizovanie a:hover

zakazanie dedeneho hover

CSS3 Anmácia - hover

css a:hover

li:hover neakceptuje rozmery