HTML/CSS - dropdown-meny försvinner för snabbt + transitions

Permalänk
Medlem

HTML/CSS - dropdown-meny försvinner för snabbt + transitions

Hej!

Jag har ett par frågor.

fråga 1:
Min dropdown-meny försvinner för snabbt när man hovrar på menyknappen "Start". När muspekaren lämnar menyknappen så försvinner alltså dropdown-menyn. Kan man sätta så att dropdown-menyn försvinner först efter en delay? transition-delay ?

fråga 2:
Samt, när dropdown menyn visas när man hovrar med muspekaren på menyknappen "Start", går det att göra så att dropdown-menyn expanderas nedåt i X och Y-led på ca 1sek eller så?

fråga3 :
Jag har flera menyer, nedan så har jag dock bara listat en av dom, men det kommer flera stycken i följd i sidleds. Om jag t.ex befinner mig med muspekaren inuti dropdownlistan på ett av elementen så vill jag att menyknappen "Start" ska få en blå underline. Det ska tydligen finnas en automatiskt-genererad .class i wordpress som heter ".current-menu-item a" som verkar passa just för detta, men jag har helt enkelt inte den klassen med i källkoden som wordpress genererar åt mig. Och detta ägnade jag en hel dag på att försöka få till förgäves.

här kommmer min HTML-kod:

HTML wordpress:

<nav id="main-nav"> <div class="dropdown"> <a href="<?php echo get_site_url();?>"> <span class="dropbtn">Start</span> </a> <div class="dropdown-content"> <?php wp_nav_menu(array( 'theme_location' => 'main-nav-start' )); ?> </div> </div> </nav>

efter wordpress genererat sin kod:

<nav id="main-nav"> <div class="dropdown"> <a href="http://localhost"> <span class="dropbtn">Start</span> </a> <div class="dropdown-content"> <div class="menu-mainmeny-start-container"> <ul id="menu-mainmeny-start" class="menu"> <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://localhost/test1/">test1</a></li> <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/test2/">test2</a></li> <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a href="http://localhost/test3/">test3</a></li> <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://localhost/test4/">test4</a></li> </ul> </div> </div> </div> </nav>

min CSS:kod

#main-nav { display:inline; position:absolute; padding-top:2.5vh; } #main-nav ul { list-style: none; font-size:2vh; width:12.7vw; } .dropbtn /* Dropdown Button */ { margin-top:0; color: black; padding: 0.6vw; font-size: 0.8vw; font-family: 'Open Sans', Arial, Helvetica, sans-serif; /*overflow: hidden;*/ border-top:0; border-left:0; border-right:0; z-index:2; } .dropbtn:hover { background:#f0f8fd; border-style:solid; border-bottom:2px solid blue; } .dropdown a:link { text-decoration: none; } .dropdown-content /* Dropdown Content (Hidden by Default) */ { display: none; position: absolute; background-color: #f8f8f8; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5); margin-top:2.6vh; } .dropdown-content a /* Links inside the dropdown */ { color: black; padding-top: 0.5vh; padding-bottom: 0.5vh; padding-right: 0.5vw; text-decoration: none; display: block; margin-left:-1.5vw; font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif; } .dropdown-content a:hover /* Change color of dropdown links on hover */ { background-color: lightblue; } .dropdown:hover .dropdown-content /* Show the dropdown menu on hover */ { display: block; } .dropdown { position: relative; display: inline-block; border-style:solid; border-image:linear-gradient(transparent, gray) 0.5; border-width: thin; padding-right:0.2vw; border-bottom:0; border-left:0; border-top:0; } .current-menu-item a { background:lightblue; }

Jag har suttit med detta nu hur länge som helst, i flera dagar, men jag får absolut inte till någonting alls.

Permalänk
Medlem

Tjena!

Känns som viss kod inte visas. Problemet som du har med att menyn försvinner för snabbt, är antagligen att parent elementet inte har en "transition" på sig. Kolla in denna js-fiddle jag gjorde. Beter sig typ (?) som du säger om du hovrar över den röda rutan, om du tar bort kommentaren för transition i endast "div'en" (typ föräldra-elementet, eller grundformen) så kommer den att gå mjukt tillbaka...

Fråga 2:
Prova nån transition på olika element:
transition: 1s;

Fråga 3:
Se om denna gör vad du tänker, bara lägga in den i så fall. Här har du lite mer saker du kan göra med underlinen.

Ledsen om jag var för snabb och inte läste noggrant, och då svarade på fel saker ;o

Permalänk
Medlem

Du behöver en a:active så den visas när du klickar. :hover funkar dåligt på touchscreen

Permalänk
Medlem

Jag kommer inte att använda denna den dropdown menyn för mobil,-och surfplattor, kommer att använda en helt annan meny som är enbart för touch-enheter

jag har provat att använda transition på alla möjliga element, men får inte till någonting alls.

någon som kan hjälpa?

jag höll på en hel dag med dag med att pilla med transitions, men typ ingenting hände

Permalänk
Medlem
Skrivet av Lexdale:

Jag kommer inte att använda denna den dropdown menyn för mobil,-och surfplattor, kommer att använda en helt annan meny som är enbart för touch-enheter

Det låter dumt

Permalänk
Medlem
Skrivet av Ernesto:

Det låter dumt

hm, nja , utifrån vad jag har sett så är det i stort sett standard att ha en mobilanpassad meny.

Permalänk
Medlem

Man har samma meny oavsett viewport eller capabilities. Den kan presenteras olika beroende på viewport, men man nyttjar samma DOM element. Visst, man kan möta viewport med javascript och seevera olika element baserat på det, men det blir långsammare. Idag stödjer alla browsers CSS media queries, onödigt att använda något annat än det.

Med det sagt är det inte bara på mobiler man surfar med touch längre.

Permalänk
Medlem
Skrivet av Ernesto:

Man har samma meny oavsett viewport eller capabilities. Den kan presenteras olika beroende på viewport, men man nyttjar samma DOM element. Visst, man kan möta viewport med javascript och seevera olika element baserat på det, men det blir långsammare. Idag stödjer alla browsers CSS media queries, onödigt att använda något annat än det.

Med det sagt är det inte bara på mobiler man surfar med touch längre.

jag använder ju media queries CSS. Sidan ska ha två olika menysystem beroende screen size.

nu tycker jag att du halkar från ämnet helt, det jag vill ha hjälp står väl beskrivet i mitt första inlägg.

Dropdown-menyn som jag arbetar med nu är för screen-size laptop/desktop.

gissningsvis så får jag inte min dropdown meny att försvinna med transistion-delay pga strukturen som html-elementen är uppbyggd på kanske.

jag vill kunna påverka .dropdown-content vars attribut är display:none
med låt säga en transition-delay på 1 sekund bör räcka så menyn inte stängs för snabbt.

har någon nån idé?
för ingenting som jag provar fungerar.

Permalänk
Medlem

Du kan inte animera display

Permalänk
Medlem
Skrivet av Ernesto:

Du kan inte animera display

ah! det förklarar varför precis ingenting som jag gjorde påverkade någonting!
tack