Styjun

How to make Flex Markers appear in Logic Pro X?

A nasty indefinite integral

What defines a person who is circumcised "of the heart"?

Can someone get a spouse off a deed that never lived together and was incarcerated?

Is my company merging branches wrong?

Is there a fox people race in D&D 5e?

Three knights or knaves, three different hair colors

Why did Nick Fury not hesitate in blowing up the plane he thought was carrying a nuke?

If I arrive in the UK, and then head to mainland Europe, does my Schengen visa 90 day limit start when I arrived in the UK, or mainland Europe?

Is being an extrovert a necessary condition to be a manager?

Are there historical examples of audiences drawn to a work that was "so bad it's good"?

Can you "hand off" from Fly to Levitate?

What to call a small, open stone or cement reservoir that supplies fresh water from a spring or other natural source?

Ribbon Cable Cross Talk - Is there a fix after the fact?

Can a UK national work as a paid shop assistant in the USA?

What is the winged creature on the back of the Mordenkainen's Tome of Foes book?

Is it safe to redirect stdout and stderr to the same file without file descriptor copies?

What pc resources are used when bruteforcing?

Results relying on higher derived algebraic geometry

amsmath: How can I use the equation numbering and label manually and anywhere?

What is the required burn to keep a satellite at a Lagrangian point?

Ways to spot non-sentient, non-conscious, telepathic shapeshifters

can conjure barrage stack with martial adept- disarming or tripping attack?

Passport queue length in UK in relation to arrival method

how can i boil an animated menu that opens when cursive enters and closes when cursor is removed?

How can I make a TextArea 100% width without overflowing when padding is present in CSS?How to remove close button on the jQuery UI dialog?How can I remove a style added with .css() function?Want nav menu over background image on splash page but it moves around on various monitorsOpen submenu only after click on parentSubmenu with z-index doesn't want to go over contentCannot display HTML stringCSS position:fixed is working for the header but not for the footerInvalid css style during zooming in calendarChanging where table starts using HTML and CSS

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I can do it to open the menu when I drag the cursor, but if I pull it down then I don't know how to do it to close it.
I tried onmouseou but it didn't really work because it was constantly closed when I moved the mouse
There are a few extra things in the css code

 <div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
 </div>
 <span onmouseover="openNav(this)" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

.sidenav 
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;


.sidenav a 
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s;


.sidenav a:hover 
 color: #f1f1f1;


.sidenav .closebtn 
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;

function openNav() 

 document.getElementById("mySidenav").style.width = "250px";
 

 function closeNav() 
 document.getElementById("mySidenav").style.width = "0";
 

javascript html css

share|improve this question

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You don't need javascript for this. Look into the css :hover pseudo selector.
  
  – Geuis
  Mar 23 at 20:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Geuis how would you go about affecting a different node while hovering over another? Or would you try to bundle them up in a single container?
  
  – aviya.developer
  Mar 24 at 0:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what does "boil" mean?
  
  – Mike 'Pomax' Kamermans
  Mar 24 at 0:43
  

  
  
  
  

add a comment | 

0

I can do it to open the menu when I drag the cursor, but if I pull it down then I don't know how to do it to close it.
I tried onmouseou but it didn't really work because it was constantly closed when I moved the mouse
There are a few extra things in the css code

 <div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
 </div>
 <span onmouseover="openNav(this)" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

.sidenav 
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;


.sidenav a 
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s;


.sidenav a:hover 
 color: #f1f1f1;


.sidenav .closebtn 
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;

function openNav() 

 document.getElementById("mySidenav").style.width = "250px";
 

 function closeNav() 
 document.getElementById("mySidenav").style.width = "0";
 

javascript html css

share|improve this question

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You don't need javascript for this. Look into the css :hover pseudo selector.
  
  – Geuis
  Mar 23 at 20:44
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Geuis how would you go about affecting a different node while hovering over another? Or would you try to bundle them up in a single container?
  
  – aviya.developer
  Mar 24 at 0:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what does "boil" mean?
  
  – Mike 'Pomax' Kamermans
  Mar 24 at 0:43
  

  
  
  
  

add a comment | 

I can do it to open the menu when I drag the cursor, but if I pull it down then I don't know how to do it to close it.
I tried onmouseou but it didn't really work because it was constantly closed when I moved the mouse
There are a few extra things in the css code

 <div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
 </div>
 <span onmouseover="openNav(this)" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

.sidenav 
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;


.sidenav a 
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s;


.sidenav a:hover 
 color: #f1f1f1;


.sidenav .closebtn 
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;

function openNav() 

 document.getElementById("mySidenav").style.width = "250px";
 

 function closeNav() 
 document.getElementById("mySidenav").style.width = "0";
 

javascript html css

share|improve this question

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

 <div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
 </div>
 <span onmouseover="openNav(this)" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

.sidenav 
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 top: 0;
 left: 0;
 background-color: #111;
 overflow-x: hidden;
 transition: 0.5s;
 padding-top: 60px;


.sidenav a 
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s;


.sidenav a:hover 
 color: #f1f1f1;


.sidenav .closebtn 
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;

function openNav() 

 document.getElementById("mySidenav").style.width = "250px";
 

 function closeNav() 
 document.getElementById("mySidenav").style.width = "0";
 

share|improve this question

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

share|improve this question

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

asked Mar 23 at 20:34

Botond SomogyiBotond Somogyi

1

1 Answer
1

active

oldest

votes

0

You are using the wrong event listener. These two will get the job done:

• 
  mouseenter: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
  


• 
  mouseleave: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
  

Also - better set the event listener in your js rather than html:

function openNav() 
 document.getElementById("mySidenav").style.width = "250px";


function closeNav() 
 document.getElementById("mySidenav").style.width = "0";

// Listener set on menu mouse enter
document.getElementById("menu").addEventListener("mouseenter", ()=>openNav());

// Listener set on sidenav mouse leave
document.getElementById("mySidenav").addEventListener("mouseleave", ()=>closeNav());

just have to give the menu an id for selecting it:

<div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
</div>
<span id="menu" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

Here's a link to working jsfiddle: https://jsfiddle.net/msq4ogza/4/

share|improve this answer

edited Mar 24 at 0:36

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55318106%2fhow-can-i-boil-an-animated-menu-that-opens-when-cursive-enters-and-closes-when-c%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You are using the wrong event listener. These two will get the job done:

• 
  mouseenter: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
  


• 
  mouseleave: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
  

Also - better set the event listener in your js rather than html:

function openNav() 
 document.getElementById("mySidenav").style.width = "250px";


function closeNav() 
 document.getElementById("mySidenav").style.width = "0";

// Listener set on menu mouse enter
document.getElementById("menu").addEventListener("mouseenter", ()=>openNav());

// Listener set on sidenav mouse leave
document.getElementById("mySidenav").addEventListener("mouseleave", ()=>closeNav());

just have to give the menu an id for selecting it:

<div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
</div>
<span id="menu" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

Here's a link to working jsfiddle: https://jsfiddle.net/msq4ogza/4/

share|improve this answer

edited Mar 24 at 0:36

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711

add a comment | 

0

You are using the wrong event listener. These two will get the job done:

• 
  mouseenter: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
  


• 
  mouseleave: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
  

Also - better set the event listener in your js rather than html:

function openNav() 
 document.getElementById("mySidenav").style.width = "250px";


function closeNav() 
 document.getElementById("mySidenav").style.width = "0";

// Listener set on menu mouse enter
document.getElementById("menu").addEventListener("mouseenter", ()=>openNav());

// Listener set on sidenav mouse leave
document.getElementById("mySidenav").addEventListener("mouseleave", ()=>closeNav());

just have to give the menu an id for selecting it:

<div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
</div>
<span id="menu" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

Here's a link to working jsfiddle: https://jsfiddle.net/msq4ogza/4/

share|improve this answer

edited Mar 24 at 0:36

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711

add a comment | 

You are using the wrong event listener. These two will get the job done:

• 
  mouseenter: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
  


• 
  mouseleave: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
  

Also - better set the event listener in your js rather than html:

function openNav() 
 document.getElementById("mySidenav").style.width = "250px";


function closeNav() 
 document.getElementById("mySidenav").style.width = "0";

// Listener set on menu mouse enter
document.getElementById("menu").addEventListener("mouseenter", ()=>openNav());

// Listener set on sidenav mouse leave
document.getElementById("mySidenav").addEventListener("mouseleave", ()=>closeNav());

just have to give the menu an id for selecting it:

<div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
</div>
<span id="menu" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

Here's a link to working jsfiddle: https://jsfiddle.net/msq4ogza/4/

share|improve this answer

edited Mar 24 at 0:36

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711

function openNav() 
 document.getElementById("mySidenav").style.width = "250px";


function closeNav() 
 document.getElementById("mySidenav").style.width = "0";

// Listener set on menu mouse enter
document.getElementById("menu").addEventListener("mouseenter", ()=>openNav());

// Listener set on sidenav mouse leave
document.getElementById("mySidenav").addEventListener("mouseleave", ()=>closeNav());

<div id="mySidenav" class="sidenav">
 <a href="#">123</a>
 <a href="#">123</a>
 <a href="#">123</a>
</div>
<span id="menu" style="font-size:30px;cursor:pointer" >☰MENÜ</span>

share|improve this answer

edited Mar 24 at 0:36

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711

answered Mar 24 at 0:28

aviya.developeraviya.developer

34711