Responzivní menu SogoCZE

HTML a CSS Responzivní webdesign Responzivní menu SogoCZE

S tímto výtvorem jsem se umístil na prvním místě v soutěži Machr na webdesign - responzivní menu.

Celé menu je napsané v jazycích HTML, CSS a Javascript s využitím knihovny jQuery.

Menu si můžete stáhnout a využít jak se vám zachce. Všechny zdrojové kódy jsou ke dostupné ke stažení.


Galerie

Program byl vytvořen v roce 2015.

 

Stáhnout

Staženo 549x (564.97 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

  Aktivity (1)

Program pro vás napsal Patrik Smělý (SogoCZE)
Avatar
Autor se věnuje front-end i back-end vývoji webových stránek, nejvíce pracuje s jazykem PHP a Javascript. Rád se učí nové věci a někdy strčí nos i do 3D / 2D grafiky.

Jak se ti líbí článek?
Celkem (14 hlasů) :
4.499994.499994.499994.49999 4.49999


 


Miniatura
Předchozí článek
Dokončení responzivního menu
Miniatura
Všechny články v sekci
Responzivní webdesign
Miniatura
Následující článek
Dokonalá HTML hlavička - 2. díl

 

 

Komentáře
Zobrazit starší komentáře (6)

Avatar
Hary Mulder
Člen
Avatar
Hary Mulder:

Patriku skvělé :-). Nejlépe se učím na "rozebrání" něčeho hotového, pak lze lépe chápat souvislosti. Palec hore. Díky :-)

Odpovědět  +1 24. dubna 22:00
Cesta k úspěchu je tvůj život a to ti budiž klíčem...
Avatar
Andrej Nordhan:

Děkuji

 
Odpovědět  +1 13. června 14:54
Avatar
wolfsharp666
Člen
Avatar
wolfsharp666:

Zdravím, je někde omezené kolik se bude zobrazovat položek v sekci .menu_Prihlase­niMenu ?? mám v něm 3 odkazy (v originále pouze 2) a na PC se mi vše zobrazuje dobře ale na mobilu se mi z těch 3 odkazů objeví pouze 2. Děkuji za odpověď.

 
Odpovědět 20. července 16:23
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na wolfsharp666
Patrik Smělý (SogoCZE):

Ahoj,

Mám takový pocit že další položka nejde vidět jelikož máš menší telefon na výšku než-li je celé menu, čili stačí trochu scrollnout dolů :).

Odpovědět 20. července 16:59
PHP můj oblíbený jazyk......
Avatar
wolfsharp666
Člen
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
wolfsharp666:

tenhle problém to nebude scrolluju jak blázen a stejně se mi ten třetí odkaz nezobrazí. Jestli máš čas tak se to můžeš zkusit sám. www.devilscustomcars.com

 
Odpovědět 20. července 17:17
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na wolfsharp666
Patrik Smělý (SogoCZE):

Tak jsem přišel na problém. Menu na telefon má odsazení 50 pixelů od horní pozice a výšku má nastavenou na 100% avšak když je to element který má pozici nastavenou na fixed prostě se dá přes celou stránku (výška 100%) a ještě se odsadí 50 pixelů od horní pozice čímž se zakryje poslední položka tím pádem je potřeba nestavit výšku na 100% - 50px (horní odsazení) tudíž k tomuto účelu použij css funkci calc.

Takže

(style.css:311)

@media (max-width: 1065px) {
 .menu__telefon {
     width: 100%;
     height: 100%;
     z-index: 9999999;
     overflow: auto;
     display: none;
     top: 50px;
     left: 0px;
     position: fixed;
     background-color: #A60800;
 }
}

Nahraď tímto

@media (max-width: 1065px) {
 .menu__telefon {
     width: 100%;
     height: -moz-calc(100% - 50px);
     height: -webkit-calc(100% - 50px);
     height: -o-calc(100% - 50px);
     height: calc(100% - 50px);
     z-index: 9999999;
     overflow: auto;
     display: none;
     top: 50px;
     left: 0px;
     position: fixed;
     background-color: #A60800;
 }
}
Odpovědět 20. července 17:36
PHP můj oblíbený jazyk......
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Patrik Smělý (SogoCZE)
Tomáš123:

V prípade takéhoto prvku výšku vôbec nepotrebuješ poznať, počítať ani nastavovať. Takúto situáciu ide riešiť dvoma lepšími spôsobmi:

  • zafixovať aj hlavičku navigáciu, čím sa vyhneš zmiznutiu pri rolovaní;
  • fixne poziciovaný prvok roztiahnuť deklarovaním oboch zvislých odsadení (top: 50px; bottom: 0), pričom na odsadenie zhora by bolo vhodnejšie použiť jednotku, ktorej hodnota závisí od veľkosti písma, napr. em.

Nič z toho ale nerieši nedomyslenú situáciu väčšieho množstva položiek, kde sa niečo natrvalo skryje za okno prehliadača.

Odpovědět  +1 20. července 18:24
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na wolfsharp666
Tomáš123:

Pri určitom vertikálnom a prípadne kvôli zalomeniu riadkov aj horizontálnom rozlíšení nastav navigácii statickú alebo absolútnu pozíciu.
Napr.:

@media (max-height: 40em), (max-width: 20em) {
.menu__telefon {position: absolute; bottom: auto;}
}

Kvôli zaručenej čitateľnosti aj pri zmenej veľkosti písma použi radšej jednotku em.

Odpovědět 20. července 18:34
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

Prehliadol som nastavený overflow, pardón.

Odpovědět 20. července 19:17
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
wolfsharp666
Člen
Avatar
Odpovídá na Tomáš123
wolfsharp666:

Děkuji moc za pomoc oběma už to funguje :)

 
Odpovědět 21. července 11:01
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 16. Zobrazit vše