Mérei Tamás webdesigner

Tutorial: HTML5 + CSS3 menü

Szerző:   |   2013-08-02

Újabb legö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;
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

36 hozzászólás

  1. Abczola
    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á?

    • cyrex
      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.

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

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

  2. Csaba
    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.

  3. tome
    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

    • cyrex
      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.

  4. Sanyi
    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.

    • cyrex
      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.

  5. Rogerrr
    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!

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

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

  6. CSensei
    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.

    • cyrex
      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.

  7. Schubert Ádám
    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?

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

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

    • Tomi
      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

  8. dante
    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. 🙂

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

      Nem használom. Csak Notepad ++

  9. Dávid
    2013. november 30. szombat - 09:53

    Helló!

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

    • cyrex
      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” }

  10. Laci
    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

    • cyrex
      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.

  11. andreas
    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?

    • cyrex
      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.

    • Roni
      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/

  12. zsolt
    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

    • cyrex
      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”

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

      Köszi, várom:)

  13. White#Angel
    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

    • White#Angel
      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.

    • Győző
      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.

  14. Raim
    2013. augusztus 13. kedd - 16:53

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

  15. Alibaba
    2013. augusztus 10. szombat - 18:49

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

  16. blackdog476
    2013. augusztus 9. péntek - 20:19

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

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

    Szép 🙂
    Köszönjük

  18. Adii
    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 :/

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

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

Hozzászólás

Legújabb hozzászólások