Menü, welches beim klicken "ausfährt" in Javascript, CSS oder irgendwie anders programmieren?
Hey ich habe letztens ein bestimmtes ganz cooles Menü auf einer Webseite endeckt, indem man nur rechts am Seitenrand einzelne zeichen wie zum Beispiel eine Lupe für Suche und noch andere Sachen untereinander standen. Wenn man dann dort mit der Maus drüber bzw draufgewischt(Weiß nicht wie ich das nennen soll :D) dann ist es quasi ausgefahren und dann stand dort Suche, wo man draufklicken kann. Wisst ihr vielleicht was ich meine :D und wenn ja wie nennt man solche menüs und womit programmiert bzw erstellt man sie ? Also javascript, CSS ... ? Wäre ganz nice wenn ihr mir mal einen Link schicken könntet wo sowas erklärt wird :)
PS Ich habe das Menü in dem Quellcode der Webseite selber einfach nicht gefunden(wegen viel Code etc.) deswegen die Frage LG
2 Antworten
Deiner Beschreibung nach, ist dieses Menü recht umständlich umgesetzt worden. Wieso kann man erst darauf klicken, wenn der Titel ausgefahren ist, sollte das Icon nicht ausreichen? Wieso wird überhaupt ein Icon verwendet, wenn es offensichtlich nochmals erklärt werden muss?
Nun gut, zu der Umsetzung. Wie Dropdown- oder Sidebar-Menüs erstellt werden, wird hier erklärt:
- https://www.w3schools.com/css/css_dropdowns.asp
- https://www.w3schools.com/howto/howto_js_sidenav.asp
- weitere Menüformen findest du in der Seitennavigation
Ich denke, danach solltest du auch eine Navigation nach deinen Vorstellungen umsetzen können.
Allerdings solltest du dich auch erst mit den Grundlagen von HTML und CSS beschäftigen, die du offensichtlich noch nicht hast. Mache dir im Vorfeld auch Gedanken über die Usability von Navigationsmenüs. Nutzen kommt vor Aussehen.
Einen Hover-Effekt, das "Wischen", wie du meintest, kannst du sehr leicht mit css machen.
html
.menu
.icon
.search
css
.menu .search
display: none
.menu:hover .icon
display: none
.menu:hover .search
display: block
Wenn du statt eines Hovers einen Klick haben möchtest, nutze JavaScript und wechsel' dann die Klassen, z.B. so
html
.menu#menu
.icon
.search
css
.visible
display: block
.hidden
display: none
var menu = document.getElementById('menu');
var
var icon = document.getElementById('icon');
menu.addEventListener('click', function () {
icon.addClass('hidden');
// selbes für Suchleiste
});