| Autor | Zpráva | ||
|---|---|---|---|
| miropiro Profil |
#1 · Zasláno: 21. 10. 2015, 10:16:54
Dobrý den, tak co jsem zde nedávno se ptal na to, jak docílit u jedné stránky toho, že od určité velikosti okna už nebude menu nahoře sjíždět podle toho, jak se pohybuje uživatel, ale zůstane staticky nahoře...
To se mi povedlo, jen by mne teď zajímalo, jak u té stránky fermentor.net/bootstrap-version docílit toho, že při rolování stránkou se to menu třeba lehce podbarví do šeda, aby návštěvník snáze poznal, kde je menu a kde je obsah, případně kdyby se pod to menu zobrazila nějaká malá černá linka oddělující vlastní menu a obsah (a čistě teoreticky při tom rolování i šipečka nahoru, která by návštěvníka vrátila na začátek stránky)? Děkuji za rady :) |
||
| Sitole Profil |
miropiro:
Jestliže nejde o změnu barvy, ale například jen stín pod menu tak je to velice jednoduché. Přidáš divu, který obsahuje menu CSS hodnotu box-shadow. Dále si ji můžeš nastavovat dle svého.
|
||
| Trejpa Profil |
#3 · Zasláno: 21. 10. 2015, 20:19:27
miropiro:
Podbarvení v závislosti na odskrolování zajistí skript. Třeba tím, že na událost posunu stránky zareaguje funkce, ve které se zjistí, o kolik je stránka shora posunutá. Pokud je více, než je požadováno, tak přidá do body třídu. Přes třídu pak ostyluješ třeba tu lištu v posunutém stavu. příklad |
||
| miropiro Profil |
#4 · Zasláno: 21. 10. 2015, 20:50:20
Trejpa: Tohle zní zajímavě ;-) Zítra v práci zkusím otestovat...
Sitole: Tak to jsem si rovnou vyzkoušel přes prohlížeč prvků, ale nevzalo mi to (nabídlo mi to tři varianty, ale ani jednu jsem moc nepobral; přidával jsem to k .fixed-nav-bar)... |
||
| miropiro Profil |
Trejpa:
„Podbarvení v závislosti na odskrolování zajistí skript. Třeba tím, že na událost posunu stránky zareaguje funkce, ve které se zjistí, o kolik je stránka shora posunutá. Pokud je více, než je požadováno, tak přidá do body třídu. Přes třídu pak ostyluješ třeba tu lištu v posunutém stavu.“ Tak tohle mi nefunguje :-( Zkopíroval jsem kód, který jsem měl umístit do tagu "body" a také ten css kód, ale nebere mi to... Navíc já mám to menu vyvolané tagem <nav class="fixed-nav-bar"> a nějak mi to nebere... Sitole: „Jestliže nejde o změnu barvy, ale například jen stín pod menu tak je to velice jednoduché. Přidáš divu, který obsahuje menu CSS hodnotu box-shadow. Dále si ji můžeš nastavovat dle svého.“
Tak s tímto si vystačím...teda asi, zadefinoval jsem si tam jemný proužek...ovšem ptám se, jak moc náročnější by byla změna barvy v závislosti na posunu stránky návštěvníkem? |
||
| Tomáš123 Profil |
#6 · Zasláno: 22. 10. 2015, 16:49:48
miropiro:
„ovšem ptám se, jak moc náročnější by byla změna barvy v závislosti na posunu stránky návštěvníkem?“ Zmena by bola o dosť jednoduchšia: @media and (max-width: sirka) {
nav.fixed-nav-bar {
box-shadow: 0 10px 5px #888;
}
} |
||
| miropiro Profil |
#7 · Zasláno: 22. 10. 2015, 17:08:45
Tomáš123: Tak teď jsme si asi nerozuměli ;-) Já jsem se ptal na to, jestli by šlo nastavit to, že ve výchozí poloze by to menu bylo barevné a jakmile bych sjel níž, tak by třeba zezelenalo...případně jak nastavit, že ve výchozí poloze by nebyl stín, ale při sjetí už ano...
|
||
| Tomáš123 Profil |
#8 · Zasláno: 22. 10. 2015, 18:50:58
miropiro:
Aha, jasné, zle som to pochopil. Pripravil som dve ukážky, ktoré zvládajú skrývanie tieňa iba v HTML a CSS: • Živá ukázka - horšia podpora kvôli pseudoelementu :before, nevyžaduje v HTML prvok, ktorý by zakrýval tieň, keď stránka nie je odrolovaná;
• Živá ukázka - lepšia podora, je potrebná aj editácia HTML. Oba príklady vyžadujú poznať výšku prvku div.menu. Tiež je potrebný vnorený <div>, aby pásik prekrýval iba tieň a nezasahoval do farby pozadia.
Samozrejme, riešenie s JavaScriptom je flexibilnejšie. S riešením problémov v tomto jazyku ti ale neviem pomôcť. |
||
| Trejpa Profil |
#9 · Zasláno: 22. 10. 2015, 19:42:27
miropiro:
Není přece problém v CSS přejmenovat značky nebo prohodit identifikátor za třídu. Tentokrát jsem stejný skript oddělil od značky <body> (pořád mu ale nastavuje třídu) a přidal šipku nahoru.
příklad |
||
| miropiro Profil |
#10 · Zasláno: 22. 10. 2015, 20:33:10
> Není přece problém v CSS přejmenovat značky nebo prohodit identifikátor za třídu.
> Tentokrát jsem stejný skript oddělil od značky <body> (pořád mu ale nastavuje třídu) a přidal šipku nahoru.
To řešení vypadá dobře, zítra ozkouším :-) |
||
| miropiro Profil |
#11 · Zasláno: 23. 10. 2015, 09:35:55
Trejpa: Schválně jsem to tedy zkopíroval tak, jak jste uvedl, jenže ouha - nějak se mi to na stránce bije s obsahem stránky, protože sotva sjedu na stránce níže, tak je to menu takové podivné průsvitné...pak jsem si uvědomil, že vlastně mám definováno, že "main-menu" má bílé pozadí, což dělalo paseku...
Pak by to už asi fungovalo, jenže bych potřeboval vyřešit překrytí menu, které při scrolování je lehce na pozadí a ve skutečnosti mi ho vlastně překrývá obsah stránky. A navíc jsem zjistil, že při tom scrolování najednou není možné vlastně na menu kliknout (ale to je asi dáno tím, že je to upozaděné). Tak jak to vyřešit :D ? |
||
| Trejpa Profil |
#12 · Zasláno: 23. 10. 2015, 10:03:00
miropiro:
„jenže bych potřeboval vyřešit překrytí menu, které při scrolování je lehce na pozadí“ Přesunout lištu do popředí pomocí z-index nepomáhá? |
||
| miropiro Profil |
#13 · Zasláno: 23. 10. 2015, 10:09:38
Trejpa:
„Přesunout lištu do popředí pomocí z-index nepomáhá?“ A víte, že ano :) ? Díky za nakopnutí :-) |
||
|
Časová prodleva: 9 let
|
|||
0