INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

(OP)
I have been implementing a drop down responsive css menu - and this was my first ever attempt at it, with the aid of one or two tutorials.

As always, im trying to learn and grasps whats going on by 'typing' and 'executing' code then 'observing' the results on a 'screen' to understand whats going on...though I am convinced that I am not taking the time out to sit down, and understand some of the fundamentals behind what certain css rules are actualy doing to certain elements that make up the menu.


either way , i believe my understanding of the theory is strong enough to at least bypass serious theory study and delve right into the 'coding' - which is why so many of us come onto forums becayse we are not getting teh balance right, in taking some time out to sit down and 'read' and 'understand' intimately the css bible..

Here is my problem - its fairly simple, ive made a percentage based responsive css drop down menu which, at the breaking point - snaps into responsive mobile friend mode ( simply making the li widths 100%).

basicaly the problem is the set up - im using the slideToggle method, and have given an id to the parent 'li' that houses the dropdown ul, which itself has a class. When I CLICK the dropdown menu , i want the drop down menu (sub menu) links to 'push' the main menu links down.

Instead they're just overlapping.

Hopefully this will make things clear for you all:

https://jsfiddle.net/628vqn5y/1/

Q - what am i doing wrong , or simply what am i not doing ? is there something basic ive overlooked or is there a very simple mistake ive made somewhere ? Why , when the li that houses the ul.dropdown gets clicked, does the menu not push the main menu links downwards and instead overlaps them ??

id like to add, that i omitted the following from the media query at the bottom of the css which has no bearing to the question itself, but i wanted to mentioned it nonetheless incase i didnt need to delete those 3 lines.


ul li:hover ul.dropdown{
display:none; /* Dont Display the dropdown on hover! */ ;
}


ul li:active ul.dropdown{
display:none; position:absolute; height:auto; margin-top:2em;
}

ul li:focus ul.dropdown{
display:none; position:absolute; height:auto; margin-top:2em;

}

I omitted these 3 lines as i discovered they were not required ( the positions were all relative originaly but then changed to absolute for no reason other than the 'and lets see what happens when we change this to that' approach, something which has helped even the most accomplished intellectuals solve insanely puzzling problems. Sometimes we discover things by chance by just randomly changing stuff in code and when we see what happens we learn something new - and then we post a blog about what we've dsicovered. In this case, nothing was discovered heh.

so yeah, let me know whats up with the drop down menu folks. Would apprecaite it heaps.

ciao

RE: drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

Elements that are set with position: absolute; and position: fixed; are removed from the document flow so do NOT affect other elements.
Self promo link to the Positioning - The Kama Sutra of CSS

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

(OP)
Thank you Chris, for that link.

anything which points me in the right direction, even if it requries learning/understanding a concept gets a thumbs up by me to be honest.


I actualy don't want anybody to provide an 'answer/solution/fix' to my post AT ALL.

I want to figure this out myself.

this is why i abstain from using forums entirely Chris, as it completely takes the satisfaction out of learning and understanding something yourself. The whole point of me enjoying web design and front end development is that im not as proficient as the 'senior web dev' types out there, but I enjoy knowledge aquisition and application ONCE ive thoroughly understood something. smile

RE: drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

My sentiments precisely, which is why I rarely provide the 'instant fix' that I see being provided so many times at the various fora where I participate. The fun is in actually learning things for oneself, "The pleasure of finding things out" is how Richard Feynman described it.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

(OP)
OKAY get this Chris,

mate the problem lay with a lack of, this declaration inside the first media query:


ul li ul.dropdown { position:relative; }


thats all I had to do - and it works.


if you want the code you can email me - cos im taking the working solution off of jsfiddle.

HOWEVER, i have to make sure that the 'hover' stops working when you hit a suitable mobile viewport, and also prevent the slidetoggle jQuery to be locked for large viewports UNTIl we reach the mobile viewports etc heh

im guessing i need to fine tune the jQuery part a little bit, with an if statement to test for window width...


all the best

C0deM0nk Man

RE: drop-down menu links 'overlapping' main responsive menu links (in mobile mode) ?

(OP)
how do i change the status of this post from 'open' to 'closed' now , Chris ?

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close