Mojezáliby.cz
Kategorie: Tvorba Webu

Pěkné menu pro web - htm/css

Pěkné menu pro web - htm/cssO rozbalovacím menu pomocí CSS nastylování tu už jednou řeč byla. Tentokrát se však k tematice vrátím podrobněji pomocí podrobného návodu i s vlastní ukázkou.

Hned úvodem začneme ukázkou horizontálního menu. Použil jsem celkem 3 html tagy a hlavně možností kaskádových stylů - CSS.

Menu je vytvořeno pomocí seznamu <ul> a jeho nastylováním přes CSS. Položky seznamu jsou odkazy obalené tagem <li>. Uvnitř tagu může být i další seznam, který má opět položky a položka může být opět dalším seznamem. Takto dostáváme víceúrovňové menu.

Dalším krokem je už jen nastylování jednotlivých tagů pomocí CSS. Ideální je navíc obalit celé menu vlastním identifikátorem pro lepší cílenost stylů.

Menu v ukázce je obaleno identifikátorem #ukazkamenu. Všimněte si hlavně stupňování zápisu pro jednotlivé úrovně. Základní menu je "ul" druhá úroveň je již "li ul" (seznam, který je položkou), třetí úroveň je již "li ul li ul" (seznam, který je položkou seznamu, který je sám položkou). Pseudotřída ":hover" je aktivována po najetí myši na prvek. Nižší úrovně jsou tedy skryty "display: none;", ale po najetí myší se atribut display mění a jdou již viditelné.

/* CSS Document */
#ukazkamenu {color: white; margin: 0 25px 170px 0; border-radius: 10px; background: black; width: 368px; float: left;}
#ukazkamenu a {cursor: pointer;}
#ukazkamenu ul { padding: 3px 4px; height: 25px;}
#ukazkamenu li {float: left; list-style-type:none; font-weight: bold; font-size: 13px; margin: 0 10px;}
#ukazkamenu li ul {display: none;}
#ukazkamenu li:hover ul {display: block; position: absolute; z-index: 10; padding: 12px; margin: 0 -35px;}
#ukazkamenu li:hover ul li {background: grey; float: none; text-align: center; padding: 8px 20px;}
#ukazkamenu li:hover ul li ul {display: none;}
#ukazkamenu li:hover ul li:hover ul {display: block; position: absolute; margin: -35px 34px;}
#ukazkamenu li:hover ul li:hover ul li{background: darkgrey;}



A zde, kdybste tápali, je i samotný html kód menu z ukázky. Úrovně jsou pro přehled odsazeny podle hloubky.

<div id="ukazkamenu">
<ul>
  <li><a>O mně</a></li>
  <li><a>Články</a>
    <ul>
      <li><a>2010</a></li>
      <li><a>2011</a></li>
      <li><a>2012</a>
        <ul>
          <li><a>Dnes</a></li>
          <li><a>Zítra</a></li>
          <li><a>Pozítří</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a>Galerie</a>
    <ul>
      <li><a>Hory</a></li>
      <li><a>Lesy</a></li>
      <li><a>Moře</a></li>
    </ul>
  </li>
  <li><a>Kontakt</a></li>
</ul>
</div>


Vydáno: 19.1.2013 20:14 | 
Přečteno: 12638x

Hodnocení:

Komentáře rss


, melody@gmail.com odpovědět
<a href="https://www.dailymotion.com/flashlars723">룰렛이기는방법</a>
<a href="https://www.pinterest.co.kr/ap75fw1317/">카지노나이제한</a>
요일 오후를 게이조는 객실에서 파이프 청소를 하고 있었다. 햇빛이 가득 들어오고 있는데
<a href="https://www.dailymotion.com/ta34vy1760">터치스크린카지노</a>
점차로 호흡 횟수를 늘려나간다.
한걸음 크게 앞으로 내딛음과 동시에 팔을 구부려 양손을 하복부
몸을 일으키면서 허리를 쭉 펴는데, 젊고 체력이 강한 사람 또는
생활체조로서는 부족함이 없다.
“거 참.”
<a href="https://www.dailymotion.com/paige371">바카라사이트블랙잭</a>
<a href="https://www.pinterest.co.kr/na06ra137/">카지노사이트맥</a>
제34장
<a href="https://www.pinterest.com/hjbv2607/">온라인카지노카지노</a>
호흡은 동작에 맞추어 손을 벌릴 때 숨을 들이 쉬고, 합칠 때 내쉬는
에 들고 읽었다.
일이다.
수신인은 적혀 있지 않았다. 요코는 가슴이 조여 오는 것 같았다. 아까 숨막힐 것 같은 도루
게이코는 요코를 칭찬한 셈인지도 몰랐다. 그러나 요코는 좀 쓸쓸했다.
<a href="http://www.dailymotion.com/g87hp8nd2701">단도박사이트주소</a>
연결되는지를 대강 이해하게 되었을 것이다.
않은가. 내기를 발동시켜서 발생하는 특이한 기의 감각을 즐기자는
<a href="https://www.dailymotion.com/bb05mf1391">카지노노하우 </a>
<a href="https://www.dailymotion.com/pr53if1519">강원랜드중독</a>
문자 그대로 두루치기식 '보건공'으로 손색이 없다는 점만은 이
<a href="https://www.pinterest.com/Majesticlayla167/">토토로사쿠폰</a>
<a href="https://www.dailymotion.com/rr26hh348">바카라홍콩크루</a>
<a href="https://www.pinterest.com/cantaloupe179/">모바일야마토</a>
나쓰에의 말에 기다하라가 다시 웃었다.
기다하라는 마지막 말을 나쓰에에게 했다.
“요코 씨, 당신으로부터 연하장을 받고 나는 뭐가 뭔지 알 수가 없었어요.”
<a href="https://www.pinterest.com/bm70nuu1071/">카지노세트</a>
져 있다고는 해도, 묘하게 을씨년스러워 보이는 분위기였다. 도코노마에는 족자도 걸려 있지
<a href="http://www.dailymotion.com/w71tw4fr539">mgm바카라</a>
게이조는 유카타로 갈아 입으면서 말했다.
<a href="https://www.pinterest.ph/i2g93j274/">슈거하우스카지노</a>
“나 잠깐 나갔다 올게.”
, dotaz odpovědět
Ahoj,chtěla jsem se zeptat na to menu v pravo,jak si ho udělal? 8 Plus jeste jak se dá udělat vodorovná čára pod textem
dekuji moc 1
icon odpověděl(a)
Vodorovná čára - html tag <hr>, menu vpravo myslíte to nahoře v šedém poli nebo ten výpis nejnovějších článků?
Jinak obecně umístění vpravo dělám pomocí css - float: right;
, nivo slider odpovědět
Děkuju za radu ohledně nivo slider. Chtěl jsem se ještě dotzat, mám nad nivo slider těsně vysouvací menu. Když na něj najedu kurzorem a vysune se mi podmenu, tak část zmizí za nivo slider. Dá se udělat, abych měl menu nad nivo slider?

Moc děkuji a přeji hezký víkend

Honza
icon odpověděl(a)
Děkuji, víkend se zatím daří na výbornou :-)
Co potřebujete by měla být schopna vyřešit CSS vlastnost "z-index" čím vyšší hodnotu má, tím je vrstva výše.
odpověděl(a)
Thank for information, is very good and unique too read.

http://bit.ly/2SqOr4j
odpověděl(a)
Fishing is not an expensive hobby. Be a low profile person in the fishing world, because the more friends, the more knowledge we can learn from them.

http://bit.ly/2SD0gnL || http://bit.ly/2EDS3vX || http://bit.ly/2SZjvgB || http://bit.ly/2EajrQV || url]http://bit.ly/2Xdd8ok[/url] || http://bit.ly/2X7Rl1k || http://bit.ly/2BAGxPW || http://bit.ly/2SMTjEW || http://bit.ly/2tbSV4D || http://bit.ly/2REvvyo ||
odpověděl(a)
Fishing is not an expensive hobby. Be a low profile person in the fishing world, because the more friends, the more knowledge we can learn from them.

http://bit.ly/2TzZEDY || http://bit.ly/2SD0gnL || http://bit.ly/2EDS3vX || http://bit.ly/2SZjvgB || http://bit.ly/2EajrQV || url]http://bit.ly/2Xdd8ok[/url] || http://bit.ly/2X7Rl1k || http://bit.ly/2BAGxPW || http://bit.ly/2SMTjEW || http://bit.ly/2tbSV4D || http://bit.ly/2REvvyo || http://bit.ly/2BuHj1d ||
odpověděl(a)
Thank for information, is very good and unique too read.

http://bit.ly/2SqOr4j || http://bit.ly/2tXqNTb
odpověděl(a)
fishing is a matter of togetherness and patience

http://bit.ly/2HAOXdY || http://bit.ly/2UA09eu || http://bit.ly/2tYNh6d || http://bit.ly/2NKW4Sj || http://bit.ly/2NJsuwE || http://bit.ly/2BV7nCw || http://bit.ly/2GEREMb ||
odpověděl(a)
fishing is a matter of togetherness and patience

http://bit.ly/2uk0xm1 || http://bit.ly/2HAOXdY || http://bit.ly/2UA09eu || http://bit.ly/2tYNh6d || http://bit.ly/2NKW4Sj || http://bit.ly/2NJsuwE || http://bit.ly/2BV7nCw || http://bit.ly/2GEREMb ||
odpověděl(a)
Thank you for information, is very unique too read ^_^

http://bit.ly/2IIiuTD || http://bit.ly/2GfbU4m || http://bit.ly/2P7Glx7 || http://bit.ly/2GcflKi || http://bit.ly/2G5D7WS ||
, Nivo slider odpovědět
Omlouvám se, že Vás ještě optěžuji dotazem na toto téma. Našel jsem stránky na Nivo slider (http://dev7studios.com/plugins/nivo-slider/), ale nepodařilo se mi na stránkách najít video.

Přeji hezký večer
Honza
icon odpověděl(a)
http://docs.dev7studios.com/jquery-plugins/nivo-slider
, odp. odpovědět
Děkuji za odpověď. Jestli jsem dobře pochopil, tak si musím Nivo Sider nainstalovat do nějakého redakčního systému, aby mi fungoval.
Mám vlastní grafiku. Jde to na ten systém nějak nainstalovat? Všimnul jsem si, že používáte SunLight

Děkuju
icon odpověděl(a)
To chápete špatně... O redakčních systémech jste mluvil vy, v rámci hostingu. Nivo slider je Javascript a jde jednoduše vložit na jakoukoli html stránku, postup je podobný jako třeba integrace Lightboxu, viz web Nivo slideru, kde je i video návod.
Jinak vlastní grafiku, to už je pak práce kodéra ji převést na šablonu pro redakční systém, nebo na funkční HTML stránku. Já pro zákazníky na příklad tvořím šablony právě pro Sunlight. Stačí aby dodali patřičné podklady v PSD.
, horní běhací menu odpovědět
Dobrý den,
rád bych si udělal internetovou stránku a jsem velký amatér.
V prvé řadě bych vám rád poděkoval za vaše stránky. Hodně mi pomohli.
Na stránkách se mi líbí vaše horní "menu" kde se mění různé obrázky. (je tam text mojezaliby.cz)
Můžete mi prosím poradit, jak můžu dát toto "menu" na své stránky?

Děkuju
Honza
icon odpověděl(a)
Dobrý den,
omlouvám se, za trochu opožděnější reakci. Ona internetová stránka není zas tak složitá, jak se někdy zdá, jen mnoho lidí dělá tu chybu, že chce hned co nejvíce prvků.
Konkrétně k dotazu - měnící obrázky jsou dělané pomocí javascriptu. Konkrétně se jedná o zdarma použitelný Nivo slider. Na jeho stránkách je i přehledný manuál (i videomanuál) jak jej implementovat a použít.
odpověděl(a)
Děkuji za odpověď. Chtěl bych si objednat webhosting u web4u.cz. Nabíjzejí WordPress 3.5.2,Joomla! 3.1.1 a Drupal 7.22. Mohu přes tyto programy taky vytvořit Nivo slider? Připradně jaký program by jste mi doporučil.

Děkuji
icon odpověděl(a)
Proč zrovna u web4u? když se dívám základní varianta sice vypadá levně ale nemá PHP ani Databáze, takže tam žádný ze zmíněných redakčních systémů nerozjedete... až ve vyšších verzích a ty mi zas připadnou drahé.
Oproti Wedos - http://hosting.wedos.com/d/62760
je cena basic varianty skoro dvojnásobná.
Zmíněné redakční systémy jdou snadno (na WP je opět i český přehledný manuál) nainstalovat na jakýkoli slušný hosting. Nivo slider, má i speciálně plugin pro WP - ovšem placený. Neměl by být problém však integrovat ručně.
Záleží co máte za požadavky. Já osobně používám český redakční systém Sunlight - http://sunlight.shira.cz/ na tom běží i tento web. Jednoduší prezentace dělám v čistém HTML kódu. WP však mohu také s klidným svědomím doporučit. Je velmi rozšířený a lze na něj najít spousty návodů, šablon, doplňků...
, Menu odpovědět
Nevím, jak bych Vám to měl poslat. Zjistil jsem ale závažnější věc. V mozille mi menu funguje normálně a v Expoleru se mi to rozhodí a vůbec neraguje. Jak je to možné?
icon odpověděl(a)
Starší IE mají problémy s počítáním margin, že jej mají jinak, řešit by to mělo jít například přidáním do hlavičky:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

On tento manuál měl obecně sloužit spíš jen jako nástin struktury a jednoduchého stylování od kterého už se případně člověk odpíchne. Uvažuji, že na stránky přímo přidám CSS poradnu formou fóra.
Jinak ukázky, jsou pro mne nejlepší přímo na internetu a odkaz na dané stránky.
, Podmenu odpovědět
Dobrý den,
opět Vám píši ohledně dotazu na menu. Ve vašem příkladě máte články - 2012 - dnes a vaše domenu menu je po najetí myši hezky vedle sebe. V mém menu mám o mých zážitcích - vánoce doma - 2012. Dále v hlaním menu mám sport - bojová umění - úspěchy. Když najedu myší na vánoce doma, tak se mi vedle toho objeví 2012.(to je v pořádku) U bojových uměních už tomu tak není. Uspěchy se mi objeví uprostřed menu bojová umění.
Jak udělám, aby když najedu myší na první podmenu(2012, úspěchy) objevilo vedle druhé podmenu (vánoce doma, bojová umění) bez ohledu na délku textu?
Doufám, že jsem to napsal srozumitelně.

Děkuju
Jarda
icon odpověděl(a)
Potřeboval bych ideálně vidět, abych mohl přesně poradit. Avšak nejspíše bude nutné upravit a nastavit právě rozměry podmenu. Popř. umístění podmenu, k jednotlivým jde v případě potřeby i přidávat třídy. Možností postupně člověka napadá více.
, rady odpovědět
Děkuju Vám za vaše rady. Moc mi pomohly. Chtěl jsem se zeptat, zda mohu na svoje stranky dát Váš odkaz. K menu ještě takovou drobnost. Nepřišel jsem na to, jak docílit toho, když najedu myší na články, tak aby se mi zabarvily do modra.

Dík
icon odpověděl(a)
Odkaz můžete, budu rád. Jinak co udělá položka po najetí myší je dáno opět pseudotřídou :hover
takže například:
a:hover {color: blue;} změní barvu textu odkazu po najetí myší na modrou.
, Pomoc3 odpovědět
Ještě mám na Vás opravdu poslední dotaz. Když si dám odkaz např. v menu o mně: a href="../menu/index.html">O mně /a>, tak se mi odkaz zabarvý do modra a podtrhne. Jak toto odstraním?

Moc děkuji
J.
icon odpověděl(a)
jde o standardní nastylování odkazů, které jsou v základu prohlížeče modré a podtržené, stačí si tedy nadefinovat vzhled tagu "a"
například
#ukazkamenu li a {text-decoration: none; color: white;}
odpověděl(a)
Природа обделила женщин физической силой, но взамен подарила развитую интуицию. Именно она позволяет даже совсем маленьким девочкам без особого труда выбирать тех мальчиков, которым они симпатичны. Ведь даже в детском саду девчонки безошибочно выделяют своего преданного поклонника. При непосредственном контакте определить первое зарождающееся чувство достаточно просто, гораздо сложнее понять, нравишься ли ты парню, если вы пока не общаетесь или знакомы заочно, допустим, по переписке в сети. Сегодня мы рассмотрим и эти варианты.
[img]http://chel-week.ru/uploads/posts/2018-09/1537343123_d0bcd0b8d0bdd0b81-696x430.jpg[/img]

Как понять, что ты нравишься парню, если вы не общаетесь &raquo; Женский журнал!..
Понять, что ты нравишься застенчивому парню сложнее всего. Обычные приёмы тут не работают. Не пытайся спрашивать его напрямую, застенчивый молодой человек обязательно будет всё отрицать. Даже близкие друзья обычно не знают о его чувствах, ведь стеснительные молодые люди не обсуждают свои чувства даже с самыми близкими друзьями. Это его большая тайна, которой он не намерен ни с кем делиться. Так что его друзья тебе не помощники и действовать придётся самой.
odpověděl(a)
ремонт сотовых компьютеров
odpověděl(a)
ремонт компьютеров западный
, Pomoc2 odpovědět
Děkuji za odpověď a omlouvám se, že píší až teď. Nakonec jsem použil Vaše menu. Je to nejlepší řešení a hlavě je přehledné a dobře napsané.
Chtěl jsem se Vás dotázat ještě na 2 otázky.
Rád bych si udělal v menu svislé dělicí čáry. tj. O mně|články|galerie| ... Jak se to dá nastavit? Podobně bych to rád nastavil i v podmenu, ale vodorovné dělící čáry. Vzor viz. http://css.blbeckove.com/3.seznamy/3.priklady/3-5.horizontalni-menu-svisle-rozbalovaci-triurovnove.html (snažil jsem se také dostat toto menu na svojí stránku, ale nechtělo mi to nechat vycentrovat. p align="center" Nevíte proč?)
2.otz jde Vaše jmenu udělat i svisle?

Moc děkuji za odpověď
Jarda
icon odpověděl(a)
pomocí align="center" centrujete text, nikoli prvek, to se dělá pomocí css "margin: 0 auto;" prvek by však měl mít nastavenou šířku. co se týče ukázky, mají tam čáry dělané zvláštním způsobem, který sem zcela nepochopil (několikrát mají nastavenou vlastnost border a pár dalších věcí). Jednoduché způsoby jsou 2, buď vkládat čáru jako obrázek (img) mezi jednotlivé prvky... a nebo právě přes border, např. pro ukázku jsem přidal
#ukazkamenu li {border-right: 1px solid #fff;
padding-right: 15px;}
čára však v takové případě bude i za posledním prvkem, což lze řešit buď tím, že bych mu přidal třídu, která ji ruší a nebo využil pseudotřídu :last-child
vodorovné čáry v podmenu by pak byly border-bottom.

2.) ano jde, mám to už delší dobu i jako rozepsaný článek. Princip je stejný, rozdíl je jen v nastylování.
, Pomoc odpovědět
Dorý den,
děkuji za příklad s menu. Hodně mi pomohl, ale pořád si nevím rady.
Rád bych si dal vysouvací menu do menu, které jsem si vytvořil (obrázek). Kam mám napsat příkaz, aby se mi menu otevíralo pod mím obrázkem?

Moc děkuji za odpověď
Jarda
icon odpověděl(a)
Dobrý den, bohužel poradit takto je trochu komplikované, ideálně potřebuji vidět konkrétní příklad (web), kde uvidím i o co jste se pokoušel, popř. alespoň nákres situace.
Pokud soudím správě z toho co píšete, tak proužek menu se skládá z jednotlivých položek, které jsou obrázky... obrázek může být uvnitř tagu <li> a potom opět pomocí pseudotřídy :hover (li:hover) vyvoláme nějakou akci po najetí myši. Podmenu by mělo být defaultně skryto (display: none) a po najedí myši by se tato vlastnost měla změnit (li:hover ul {display: block;}). Poté již stačí jen vhodně napozicovat, aby se menu objevovalo tam kde chcete.



© 2019 Mojezáliby.cz

SunLight CMS | Admin