Dropdown question follow up

HTML & CSS
1

unfortunately this topic expired, though i need some follow up help

please see

is this code appropriate? code i should not use?

OR is this totally usable dropdown code?

if it is, how can i put in a <nav> that stretches the width of the viewport?

please add 3 or 4 links :grinning:

its all by itself now

MANY THANKS!!

2

I’ll make a few observations and then you can decide yourself whether its good to use or not.

  1. Firstly you should get rid of the inline click handler and do it from the JS file instead.

 <button onclick="myFunction()"  etc..

Add an event listener in the JS file instead.

  1. The following JS targets one specific element by its id:

document.getElementById("myDropdown").classList.toggle("show");

That would be no use if you had multiple menu items.

  1. This structure makes it awkward to target the correct drop down.
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a target="_blank" href="http://www.google.com">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>

When the button is clicked you have to find the next item to show. A better construct is the nested list approach where you can find the nested dropdown automatically from the clicked item just by adding a class to the clicked item.

This is the usual html for a dropdown.

<ul class="top-nav">
  <li><a href="#">Menu 1</a>
    <ul class="sub-nav">
      <li><a href="#">sub nav 1</a></li>
      <li><a href="#">sub nav 2</a></li>
      <li><a href="#">sub nav 3</a></li>
      <li><a href="#">sub nav 4</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a>
    <ul class="sub-nav">
      <li><a href="#">sub nav 1</a></li>
      <li><a href="#">sub nav 2</a></li>
      <li><a href="#">sub nav 3</a></li>
      <li><a href="#">sub nav 4</a></li>
    </ul>
  </li>
</ul>

You could just change the display:inline-block to display:flex and then buttons would line up horizontally.

e.g.

  .dropdown {
    position: relative;
    display:flex;
    background:blue;
  }

Of course to function as its stands as you’d need to change the id each time an supply it in your onclick function.

If you let me know what mark up you want to work with we’ll get that sorted first then move the thread to the JS forum for the appropriate js. :slight_smile:

1 Like
3

Here’s an example with the extra items added and the extra structure required. This is still based on your example.

Things still to consider:

  1. Remove inline event handler and use an event listener in the js instead.

  2. Consider whether this html structure is extensible enough. For instance this structure does not cater for multiple dropdowns unlike the nested list approach. However if you aren’t going in that direction then the html is not too bad although I have a dislike of bare anchors next to each other as that used to be a problem for assistive technologies but I believe they are ok with it now.

Once you’ve settled on an approach I will move to the JS forum for tidying up :slight_smile:

4

Here’s an example with inline event handler removed.

Another consideration to mention is to avoid hiding the menu with display:none as that is not user user friendly (assistive devices and search engines may not read or follow hidden links) but apart from that its not possible to apply animation effects to elements with display:none. usually I hide the menus by absolutely positioning them offscreen to the left and then just bring them back when needed. This allows animations to work.

5

Here’s an example of that method :slight_smile:

I think that’s enough for you to think about now :slight_smile:

6

Not quite :slight_smile: Here’s the version using nested lists instead.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.