Hamburger menü készítése (CSS)

Hamburger menü készítése (CSS)
2021-08-07T23:40:18+02:00
2021-08-09T13:32:57+02:00
2022-10-15T21:16:11+02:00
*deleted_23419333
Sziasztok!

Jelenleg WordPress alatt az alábbi kódot használom menü generálására:

<?php wp_nav_menu( array( 'theme_location'=> 'header-menu' ) ); ?>

Ezt eredményezi:

<ul id="menu-header" class="menu"> <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">A</a></li> <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-25"><a href="#">B</a> <ul class="sub-menu"> <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">B1</a></li> <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#">B2</a></li> </ul> </li> <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">C</a></li> <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">D</a> <ul class="sub-menu"> <li id="menu-item-31" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-31"><a href="#">D1</a></li> </ul> </li> <li id="menu-item-28" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-28"><a href="#">E</a></li> </ul>

Ehhez CSS:

.menu-header-container { background-color: red; border-radius: 5px; height: 48px; margin: 0 0 32px 0; padding: 0; white-space: nowrap; width: 100%; } .menu-header-container ul.menu { height: 48px; list-style: none; margin: 0; padding: 0; } .menu-header-container ul.menu li.menu-item { display: inline; height: 48px; } .menu-header-container ul.menu li.menu-item-has-children { position: relative; } .menu-header-container ul.menu li.menu-item:hover ul.sub-menu { display: block; } .menu-header-container ul.menu li.menu-item a { line-height: 48px; padding: 0 16px; } .menu-header-container ul.menu li.menu-item ul.sub-menu { display: none; list-style: none; position: absolute; } .menu-header-container ul.menu li.menu-item ul.sub-menu li.menu-item { background-color: pink; display: block; } .menu-header-container ul.menu li.menu-item ul.sub-menu li.menu-item a {}

A wp_nav_menu függvény kimenetelén lehetne változtatni, de ha csak nagyon nem indokolt, akkor nem szeretnék: wp_nav_menu()

Ha kisebb kijelzős eszközről nézik meg a honlapot, akkor szeretnék hamburger menüt használni: ≡

@media only screen and (max-width: 600px) {}

Hogyan tovább? Lehetőleg JS nélkül.
Mutasd a teljes hozzászólást!
szia, ez egy nagyon fapados megoldás, de kb. a működését megnézni jó:
Edit fiddle - JSFiddle - Code Playground
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd