Highlighted

hover div control issues

Explorer ,
Nov 12, 2018

Copy link to clipboard

Copied

i created a menu slide in using on hover..

ANDY LILIEN | DOP

i want the menu to slide in only hovering the dashed lines..

the problem is when you move your mouse away that div is smaller than the menu and the menu slides off..

if i make parent div and include the menu then you'll get the menu sliding in when you havent rolled over the dashes--

any thoughts?

Views

209

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

hover div control issues

Explorer ,
Nov 12, 2018

Copy link to clipboard

Copied

i created a menu slide in using on hover..

ANDY LILIEN | DOP

i want the menu to slide in only hovering the dashed lines..

the problem is when you move your mouse away that div is smaller than the menu and the menu slides off..

if i make parent div and include the menu then you'll get the menu sliding in when you havent rolled over the dashes--

any thoughts?

Views

210

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 12, 2018 0
Explorer ,
Nov 12, 2018

Copy link to clipboard

Copied

apologies - i meant when you scroll down over the menu items the menu slides off.. because the div controlling the hover is smaller

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 12, 2018 0
LEGEND ,
Nov 13, 2018

Copy link to clipboard

Copied

have you tried just moving the div over a bit more to the left:

#navdiv {

position: absolute;

top: 54px;

left:-300px;

z-index:999999;

opacity: 0;

transition: all .3s ease-in;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 0
Explorer ,
Nov 13, 2018

Copy link to clipboard

Copied

thank you -

i tried it it stills disappears on mouse out..

i was able to get it to work using a parent div

ANDY LILIEN | DOP

but now it only slides back out when you move your mouse completely off the browser (or over the AL logo which is not in the container)

how do i specify the container to be just that area and not the full body - i tried height and width

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 0
Adobe Community Professional ,
Nov 13, 2018

Copy link to clipboard

Copied

I just thought I'd mention that hover won't do anything on touch screen devices.  Also, the bottom right text is cut off on my display.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 1
Explorer ,
Nov 13, 2018

Copy link to clipboard

Copied

thanks nancy - its a temp page - ill do a  mobile version once this is good

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 0
reelhero LATEST
Explorer ,
Nov 13, 2018

Copy link to clipboard

Copied

any thoughts on how to specify the container to be just that area and not the full body - so that as soon as you mouse out from that menu it slides back left?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2018 0