Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

make the menu use dropdowns in flexbox. JavaScript

  • SOLVED

I would like to add js / jquery / css (your choice) code to http://chesstao.com/demo.php to make the menu use dropdowns and still be responsive. The menu is written in flexbox, so keep it compatible.

Just take two to four menu items and make them drop-down items on hover.

Answers (3)

2019-02-01

User180435 answers:

https://chesstao.com/demo-2.php


Rainner Lins comments:

I'll have a look at it.


Rainner Lins comments:

Ok, it has to do with z-index on the toggle button, need to bring it to the front of the stack, try this.

Added position: relative; to .topnav


.topnav {
position: relative;
overflow: hidden;
background-color: orange;
color: #000;
}


Added z-index: auto; to .icon


.topnav .icon {
float: right;
display: block;
z-index: auto;
}


User180435 comments:

Tried your code. None of the drop downs work. Neither does the hamburger!


User180435 comments:

https://chesstao.com/demo-2.php


Rainner Lins comments:

Alright, looks like it's the media query. The .responsive class only works when the windows is below 800px, so you might want to change that to a bigger value if you want it to start working for larger screen size.

Here's a screencap:

https://i.imgur.com/kV5Tf6o.gifv


User180435 comments:

https://chesstao.com/demo-2.php those dropdowns at full screen width don't work.


Rainner Lins comments:

The position: relative on the .topnav fixed the toggle, but made the dropdown stop working. remove it for now. I'll see if I can rewrite this using flexbox instead of floats.


User180435 comments:

Excellent!


Rainner Lins comments:

Here you go:

https://jsfiddle.net/rainnerlins/kbm958uc/

Here's a screencap:

https://i.imgur.com/OXpIjR2.gifv

Hope that does it.


User180435 comments:

Looks fine! Can I send you an email "thank you" card?

2019-02-01

Arnav Joy answers:

I am checking it.
it is possible you can contact me on email : [email protected]
or skype : arnav,joy


Arnav Joy comments:

I am working on it and will show you demo soon.


Arnav Joy comments:

you can check demo here:
http://ajonweb.com/clients/naveed/demo/menu.html

2019-02-01

Rainner Lins answers:

you can get that effect by having another UL list within the main list items and use CSS to show them on hover. Here's a quick example on jsfiddle:

https://jsfiddle.net/b4n6qe7s/


User180435 comments:

I need it responsive and with a media query for the hamburger.


Rainner Lins comments:

Ah, missed that part. Here's a more in-depth guide on how to make one, but the concept is the same:

https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

They're using divs and buttons, but you should be able to replace that for lists and links.


User180435 comments:

The menu has to work for tablets and mobile.


User180435 comments:

If I add that code, it will screw up the existing css.


Rainner Lins comments:

You could replace your existing menu with that one and make changes so it look the way you want. If it doesn't work, go back to the old one. No point in re-inventing it there's one already made.


User180435 comments:

I will try it.


User180435 comments:

The <div> code (instead of the ul version) is junky. I tried changing it to ul + li but it doesn't work.


User180435 comments:

The code you suggested has been added. It's 90% functional. But the hamburger itself isn't clickable. I would very much appreciate your help in this matter.