HTML5 + CSS3 menü

Szerző:   |   2013-08-02

Jegördülő menü jQuery nélkül. Minimális szélessége 700px, azon felül igazodik a böngésző szélességéhez.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


<html>
<head>
	<meta charset="utf-8"/>
	<title>CSS3</title>
	<link rel="stylesheet" href="style.css"/>
</head>
<body>


<section id="wrapper">
	<nav>
		<ul>
			<li><a href="">elso</a></li>
			<li>
				<a class="dropdown" href="">masodik</a>
				<ul>
					<li><a href="">almenu 1</a></li>
					<li><a href="">almenu 2</a></li>
					<li><a href="">almenu 3</a></li>
				</ul>
			</li>
			<li><a href="">harmadik</a></li>
			<li><a href="">negyedik</a></li>
			<li><a href="">otodik</a></li>
		</ul>
	</nav>
	<section id="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultricies tellus ut turpis consequat, porta eleifend risus luctus. Quisque vel fringilla nisl. Proin ut eros feugiat, hendrerit diam a, facilisis lectus. Vestibulum vel velit vitae erat blandit sagittis eu vestibulum urna. Ut vestibulum suscipit ipsum in venenatis. Donec adipiscing sagittis mauris, eget pharetra massa interdum pulvinar. Duis feugiat, justo vitae aliquet blandit, risus purus tempus lorem, a ultrices sapien dui ut felis. Cras non mi tellus. Pellentesque rutrum purus at interdum aliquam.</p>
		<p>Quisque rutrum, nunc eget ultrices elementum, dui nisl posuere dui, at gravida lectus est vel arcu. Nunc consectetur pharetra nulla id vehicula. Proin in aliquam neque. Aliquam consequat, dui a condimentum mollis, libero mauris rhoncus eros, vitae pulvinar tortor tortor eget dui. In vel adipiscing quam, ut laoreet metus. Donec ut aliquam nisi, eget iaculis velit. Donec rhoncus tincidunt nisi ac consequat. Nulla interdum nec orci eu faucibus. Curabitur sed dui ac metus iaculis tempus varius sit amet nisi. Proin tincidunt diam eget arcu semper, in consectetur turpis cursus. Sed sit amet ipsum quam. Fusce eget nulla consectetur, laoreet urna eget, feugiat ipsum. Maecenas elementum, urna eget porttitor interdum, augue mauris mattis mauris, at ullamcorper lorem massa sit amet sapien.</p>
		<p>Morbi eget lectus vitae mauris posuere commodo sit amet vel purus. Sed semper libero quis neque placerat, ac fermentum justo suscipit. Nulla erat est, ultrices a odio eu, tempus malesuada metus. Aenean leo lacus, fermentum vel sodales eu, sagittis ut sem. Nulla pulvinar vulputate hendrerit. Integer facilisis, metus eu sagittis tincidunt, justo nisl iaculis nibh, mattis ornare urna eros sit amet massa. Aenean facilisis malesuada lorem, id vestibulum metus feugiat a. Pellentesque molestie scelerisque libero nec dictum. Sed commodo rutrum facilisis. Proin eleifend, sapien ut molestie aliquam, est elit congue tortor, vitae varius lacus neque blandit erat. Aenean in tincidunt felis, non feugiat nisl. Integer porta enim tortor, sed congue quam facilisis eu. Vestibulum vitae tortor magna. Fusce sit amet purus convallis, ornare metus ut, ultricies diam. Sed eleifend, dui ut bibendum mattis, augue mauris sagittis dolor, eget aliquam est lacus vel nisi.</p>
	</section>
</section>

</body>
</html>

CSS forráskód


* {
	padding: 0;
	margin: 0;
	border: 0
}
body {
	font: 13px arial;
	color: #bbbbbb;
	background: #373737;
	margin: 40px;
	background: linear-gradient(to bottom, #373737 0%,#606060 100%) fixed
}
a { text-decoration: none }
section#wrapper {
	min-width:700px;
}
nav {
	margin: 0 0 40px 0;
	font-size: 20px;
	font-weight: bold
}
nav ul {
    list-style: none;
    width: 100%
}
nav li {
    float: left;
    position: relative;
    min-width: 20%;
}
nav li:first-child a {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
nav li:last-child a {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
nav ul li ul li:first-child a { border-radius: 0 }
nav ul li ul li:last-child a {
	border-radius: 0;
	border: 0
}
nav a {
	background: #ffa84c;
	background: linear-gradient(to bottom,  #ffa84c 0%,#ff7b0d 100%);
	text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
	color: #444;
	display: block;
	padding: 10px 20px;
	text-align: center;
	transition: all .25s ease;
	border-right: 2px solid #000
}
nav li:hover a {
	background: #8fc400;
	background: linear-gradient(to bottom,  #8fc400 0%,#80aa00 100%);
	color: #fff;
	text-shadow: 1px 1px 2px rgba(1,1,1,0.5);
}
nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 30px;
    visibility: hidden;
    transition: all .25s;
}
nav li:hover ul {
    opacity: 1;
    top: 45px;
    visibility: visible
}
nav li ul li {
    float: none;
    width: 100%;
	background: #202020;
	font-weight: normal;
	font-size: 15px;
}
nav li ul li a {
	border: 0;
	background: #000 !important
}
nav li ul li a:hover {
    background: #4f4f4f !important
}
section#content {
	line-height: 18px;
}
section#content p {
	margin: 0 0 20px 0;
	text-align: justify
}
nav ul:first-child:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

41 hozzászólás

  1. 2017. augusztus 23. szerda - 20:52

    Szia!
    Szeretnék kérdezni és válaszként egy linkkel is beérem. Régi weblapomat framekkel szabdaltam szét és könnyedén meg lehetett oldani, ha pl. egy bal oldali menüpontra kattintva a hivatkozott tartalmát a jobb oldaliban szeretném megjeleníteni. Most milyen lehetőség van rá? Esetleg js nélkül?
    Előre is köszönöm válaszod.

    • 2017. október 6. péntek - 14:36

      JS nélkül nem lehet megoldani. El kell kerülni a hagyományos frame-ekre hajazó megoldásokat.

  2. 2015. október 11. vasárnap - 18:16

    Szia!
    Azt szeretném megkérdezni, hogy ezt meg lehet valahogy úgy is megcsinálni, hogy IE 7-8 alatt is működjön vagy csak a jQuery féle lehetőség van rá?

    • 2015. október 11. vasárnap - 18:21

      Modernizr-t nézegesd, de én pl. nem foglalkozom évek óta ezzel. Ha nem megy IE8 alatt, akkor nem megy.

    • 2015. október 12. hétfő - 06:24

      Köszönöm a gyors választ! 🙂

  3. 2015. október 11. vasárnap - 11:07

    Szia Sanyi,

    Hogy lehet megcsinalni azt hogy a CSS forraskodot kozvetlen a HTML forraskodba irjam,ne pedig hivatkozas alapjan olvassa be a rendszer? Persze,azt vagom,hogy akkor nem kell a bekezdes a HTML forraskodba,de hogyan kell beszurnom a teljes CSS forraskodot,mert nem sikerult,vagyis felhozza a bongeszo,de csak sima HTML-kent.

    Elore is koszi.

    • 2018. október 1. hétfő - 03:52

      Hát késve de leírom. Hátha valakinek hasznos lesz. ide jöhet a CSS kód

    • 2018. november 23. péntek - 22:54

      Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet 🙁

    • 2018. november 25. vasárnap - 18:49

      Ki az a Sanyi?

  4. 2014. november 22. szombat - 17:36

    hogy lehet megcsinálni hogy ha berakok 10 főmenüt akkor maradjon 1 sorba az egész és automatikusan állitsa a gomb szélességet ?
    illetve hogy rányomok hogy első menü akkor alatta nyíljon meg ?

    köszi

    • 2014. november 23. vasárnap - 21:01

      Ez a példa nem így működik? Százalékban kell megadni a gombok szélességét.

  5. 2014. április 14. hétfő - 13:54

    Kedves Tamás!

    Bár nem teljesen ide való a téma, igazából nem is hozzászólni szeretnék, hanem javasolnék egy lehetséges tutorialt, ami talán sokaknak felvetődött már.

    A megoldandó probléma a következő: A honlap kitölti a böngésző ablakát, benne egy jobbsáv és egy balsáv, (esetleg három sávos és akkor középső sáv is) Lehet content meg sidebar végülis mindegy. A lényeg, hogy ezek lehetnek fix vagy %-os szélességűek egymás mellett, esetleg keverve is a pixeles és %-os méreteket. Eltérő hátterük van, s ez a háttér minden esetben lenyúlik a képernyő aljára, akkor is, ha a lap tartalma nem ér el odáig. Más esetben pedig a hosszabb tartalom aljáig ér mindkettő.

    Sokat keresgéltem ezügyben és találtam is egy (igazából nem is egy, hanem több) olyan sablont, ami tud ilyet, de azok vagy mindenféle JQuery csodákkal vagy olyan átláthatatlan css gombóccal működnek, hogy hihetetlen. Furcsállom, hogy ezt nem lehet megoldani valami egyszerűbb módon html+css használata mellett.
    Itt egy html+css verzió, ami számomra elég nyugtalanító módon tologatja a div-eket, padding-okat, és nem nagyon látom át. Persze, ha nem is akarja az ember átlátni, végülis tele van kommentezve az egész, abból kedvére faraghatja mindenki… Tehát a dolog megoldható vele, de mégis, csak kitaláltak már erre a nem túl komplikált megjelenésre egy épkézláb megoldást.
    http://matthewjamestaylor.com/blog/perfect-3-column.htm

    Bocsi, ha ide szemeteltem, de nem találtam témaközelibb bejegyzést.

    • 2014. április 22. kedd - 21:10

      A megoldás ennél jóval egyszerűbb: ne tervezz olyan oldalt aminek a kódolásával ennyit kell szenvedni. Amit belinkeltél az szerintem valami ezer éves cucc lehet, full 100%-ra nem szokás oldalt tervezni a 30″-os monitorok világában.

      Nem túl jó megoldás, hogy keverni akarod a százalékos és a pixeles értékeket egy layout-on belül.

      Töltsd le a Bootstrap grid-et és arra építsd fel az oldalt. Sokkal egyszerűbb, mint ilyen fabrikált dolgokkal kísérletezni.

  6. 2014. március 16. vasárnap - 22:35

    Szia! Hogy lehet azt megoldani, hogy ha az illető rámegy az egyik menüre pl: Galéria, akkor áterelje egy lapra és ott legyenek a képek? Köszönöm előre segítséged!

    • 2014. március 27. csütörtök - 16:43

      Csinálsz neki külön oldalt és oda linkeled.

  7. 2014. február 21. péntek - 20:30

    Szia cyrex!

    Megpróbáltam elkészíteni a menüt és amikor legördítem az alábbi eredményt produkálja:

    Menüpont1 Menüpont2
    almenü1
    almenü2
    almenü3
    almenü4
    almenü5

    Az a kérdésem, hogy most mit tegyek, mert összevetettem a te általad megadott CSS kóddal és semmi feltűnő különbséget, kivéve az aftert , ami nem működött.

    • 2014. március 27. csütörtök - 22:20

      Én ebből semmit se látok így. Ott a forráskód, másold ki és úgy tutira működni fog.

  8. 2014. február 6. csütörtök - 18:52

    Szia!
    Nem tudod, hogy hogyan kell egyedi URL címet készíteni? Pl.: http://valami.hu/valami.php-ból hogyan csinálhatok http://valami.hu/egyedi_mezo
    Tudnál ebbe segíteni?

    • 2014. március 27. csütörtök - 16:32

      Ezekre a kulcsszavakra guglizz: mod_rewrite, rewrite engine, .htaccess

    • 2014. április 22. kedd - 20:42

      Szia! Én találtam egy sokkalta egyzerűbb megolást, nem kell hozzá htacces. A lényege annyi, hogy amikor linkelsz valamirt href-el akkor nem egy konkrét file-ra mutatsz, hanem egy mappára amiben az alapértelmezett file van. például: Nekem van a barack mappámban egy index.php és erre szeretnék linkelni a főoldalról úgy, hogy ha megérkezett a linkre akkor ne az mcwannado.com/barack/index.php szerepeljen ott csak az hogy mcwannado.com/barack . ezt avval tudod elérni ha a href et így írod meg: Barack viszont ilyenkor a webadminban be kell állítani azt a file nevet alapértelmezettnek ameiket szeretnéd megnyitni normál esetben index.php vagy index.html. Ha valamit nem értesz csak írj ide és elmagyarátzom

  9. 2013. december 2. hétfő - 21:10

    Szia Cyrex!
    Az lenne a kérdésem, hogy te szoktad használni az Adobe Dreamweaver-t? Ha igen, akkor mitől függ, hogy azt használod-e, vagy pedig notepad-ban dolgozol? Illetve, ha szoktad használni, nem gondolkodtál még azon, hogy készítesz abból is tutorialt? Köszi. 🙂

    • 2013. december 13. péntek - 15:53

      Nem használom. Csak Notepad ++

  10. 2013. november 30. szombat - 09:53

    Helló!

    El tudnád magyarázni, az :after szelektor mire jó? És mi az !inportant lényege?

    • 2013. december 13. péntek - 16:09

      Az !important annyit csinál, hogy felülír mindenféle öröklési szabályt és rákényszeríti az elemre az adott beállítást. Elvileg, ha tisztán kódolunk és ügyelünk a helyes hierarchiára akkor nem lehet rá szükség. Gyakorlatilag viszont sokszor dolgozunk tákolt-gányolt rendszereken amibe mindenki belehegesztett már valamit, emiatt lehetetlen kibogozni mi honnan öröklődik és ilyenkor jól jöhet a használata.

      Az :after egy sima CSS szelektor amivel szöveges tartalmat tudsz betenni egy adott elem mögé. Ehhez a content property-re lesz szükség, például: p:after { content: “bekezdések utáni tartalom” }

  11. 2013. november 20. szerda - 20:52

    Szép estét!

    Nemrégiben összedobtam 1 hasonló weblapot, mint a legutolsó munkád, csak vannak kisebb problémáim, amiben remélem tudsz rajtam segíteni 🙂
    Az egyik az lenne, hogy amikor benne vagyok 1 galériában, akkor az előrébb van sorolva a rangsorban, mint a lenyíló menü. Értelmesebben: kiakarok választani 1 másik almenüt, ami belelóg a képekbe, de az visszaugrik, mert olyan, mintha a képre vittem volna az egeret.
    A másik, hogy amikor csak simán a galériát választom ki, és nem az egyik almenüjék(pl portfóliók), akkor nem tudom, hogyan lehetne úgy megoldani, hogy mappákban jelenítse meg(lsd utolsó munkád).
    Harmadik és jelenleg utolsó problémám, hogy a menüt nem engedi középre igazítani. Szinte már mindennel próbálkoztam :/

    Köszönöm előre is a válaszod.

    Laci

    • 2013. december 15. vasárnap - 16:45

      A középre igazításhoz adj meg fix szélességet az elemnek és auto margint a két oldalára. Csak így tudod középre igazítani.

      Az olyan jellegű problémáknál ahol alálóg az menü a tartalomnak célszerű először a z-index használatát megpróbálni. Annak legyen a legnagyobb z-index értéke amit legfelülre akarsz tenni.

      A képgaléria amire gondolsz az egy másik rendszer, nem WP. Eleve úgy lett leprogramozva.

  12. 2013. november 14. csütörtök - 14:04

    Szia bocsi hogy ide irok de fontos lenne!!
    Több weboldalon is látam ahol szoktak versenyeket inditani hogy like gombal oldják meg a szavazást hogy lehet ezt megcsnálni?

    Pl.http://www.radioface.hu/kozosseg/szavazas igy szeretném én is megoldani a szavazást de hogy kell????
    esetleg facebookon meg lehet csinálni?

    • 2013. december 13. péntek - 16:40

      A facebook-nak elég jó API-ja van amivel ilyesmiket meg lehet oldani. Ezen kívül rengeteg alkalmazás létezik hasonló célra. Mi pl. a besocial.hu applikációit szoktuk használni.

    • 2013. december 15. vasárnap - 12:34

      Egyszerűen meg lehet oldani mivel “Like” btn-t linkre tudsz generálni így szerintem egyértelmű.
      https://developers.facebook.com/docs/plugins/like-button/

  13. 2013. szeptember 4. szerda - 12:03

    Szia!

    Először is azt szeretném mondani, hogy nagyon sokat tanultam a tutorial-jaidból(szinte mindent tőled tanultam, legfőképp youtube-on), ezúton is köszönöm:)

    Aztán most rátaláltam erre, mert szeretnék készíteni egy többszintes legördülő menü-t.
    Ezt a mostanit sikerült átszabni a sajátomra.
    Csak azt nem tudom, hogyan lehet az almenük-ből újabb lenyíló(jobbra) menü-ket létrehozni?
    Tudsz ebben segíteni?
    Köszi

    • 2013. szeptember 5. csütörtök - 14:09

      Majd csinálok ilyen példát, addig is erre guglizz: “multi level dropdown menu css”

    • 2013. szeptember 8. vasárnap - 11:56

      Köszi, várom:)

  14. 2013. augusztus 19. hétfő - 22:03

    Hogyan lehetne megoldani, hogy esetleg egy képet tegyünk háttérnek?
    Mert ha berakok egy képet, elég furcsán néz ki:S

    • 2013. augusztus 19. hétfő - 22:20

      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      Ezeket a tulajdonságokat ráadtam a háttérre, és már normálisan néz ki.

    • 2014. január 7. kedd - 19:56

      Hali remek a videód és közben csinálóm a sájt weblapom is.
      De nekem is jobbra teszi 2 a képet.

  15. 2013. augusztus 13. kedd - 16:53

    Nagyon tetszetős és alapnak is nagyon jó! 🙂 Köszönöm hogy elkészítetted!

  16. 2013. augusztus 10. szombat - 18:49

    Köszönöm!
    Az oldaladon mindég tudok valami újat tanulni.

  17. 2013. augusztus 9. péntek - 20:19

    Igényes és szép mint mindig! Köszönjük 🙂

  18. 2013. augusztus 8. csütörtök - 16:49

    Szép 🙂
    Köszönjük

  19. 2013. augusztus 3. szombat - 22:44

    Helló! 😀
    A menü szélei ugye le vannak kerekítve..Azt hol tudom állítani mert nem nagyon találom :/

    • 2013. szeptember 2. hétfő - 16:10

      border-radius beállítást keresd.

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • HTML5 + CSS3 menü

    Ki az a Sanyi?...

  • Scrollbar színezgetés CSS-sel

    Köszi a választ. Igen, egyébként azt használtam, amit először küldtél, és azzal állt fent az említett probléma. Már váltottam plugint azóta, és már me...

  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...