Adding dropdown menu to my existing navigation

Hello,

please share how to make a dropdown menu from https://botanicgardentravelers.org/ 's navigation

any existing link will do :grinning:

many thanks!

What have you tried so far?

1 Like

You mean something like this?

https://robinpoort.github.io/vanilla-js-responsive-menu/

1 Like

i did a google search, found a lot of results

ultimately i made this

you will see i tweaked the HTML and CSS

i feel pretty good about this!

it looks like my original code

initially i wanted to add a dropdown to existing code, but this worked out fine

some questions though…

first i am not good at floats

how can i shift the navigation to the center or to the right?

how can i code the “active” link to fill the top to bottom space?

how do i code a arrow next to my dropdown link?

how do i center the logo?

MANY THANKS!!

progress!

Unfortunately, that menu is inaccessible to anybody using keyboard navigation, unlike the one I linked to above.

(Maybe I should have linked to the repo, rather than the demo: https://github.com/robinpoort/vanilla-js-responsive-menu)

1 Like

That’s a good learning curve and gets you into the mindset of how things work:)

However as @TechnoBear said that menu falls short on many fronts and you would be better advised to utilise the one that was linked to as it is both keyboard and touch friendly and accessible. I know it uses a lot more JS but drop down menus by nature are inherently inaccessible and even competent coders struggle to make them work for everyone.

Note that hover doesn’t really work on touch devices and although the menu may open it will not close unless something else is selected so its better to have a click menu for small screen rather than a hover menu (which is what the responsive menu above does nicely).

It is also very tricky to add keyboard navigation to a drop down and unless you are proficient at both css and js then it is not a simple matter.

Lastly the html should be semantic and a nested list structure gives an inherent structure to the menu rather than bare anchors and divs.

Just for practice as I still recommend the menu above you can do these things:

You can shift it to the right if you use flexbox as we don’t really use floats these days. Then all you need do is add a margin-right to the h1 to push it all to the right.

Remove the height:100% from .active and then remove the margin top and bottom from the h1 and then use the flexbox approach I mentioned and then they will all be the same height (apart from the dropdown).

You can use the :before or after pseudo element to create an arrow. Here’s an old demo of mine. Scroll down to line 68 of the css panel to see the relevant code.

You can add a basic keyboard accessibility using :focus-within which will allow tab to work through the menu.

I’ve added most of the above into the code below which should go at the end of your css as it over-rides some things.

.topnav {
  display: flex;
}
.topnav > a,
.topnav > h1{
 display:flex;
 align-items:center;
}
.topnav > .dropdown{
  display:block;
}
.topnav h1 {
  margin:0 auto 0 0;
}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
  display: block;
  background-color: #745d46;
}
.dropdown:hover .dropbtn,
.dropdown:focus-within .dropbtn{
  background: #ac7e54;
}
.dropbtn{
  display;lflex;
  height:100%;
  align-items:center;
} 
.active{height:auto;}
/* arrows */
.dropdown .dropbtn {
  position:relative;
	padding-right:20px;/* make space for arrows*/
}
.dropbtn:after {
	content:"";
	position:absolute;
	right:3px;
	top:50%;
	margin-top:-3px;
	width: 0;
	height: 0;
	border-top: 6px solid white;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}

It will then look like this:

This is only for example only and to teach how to do things as I recommend that you use semantic html structure (nested lists) and use a full blown accessible menus such as the one already linked to. However it is good practice to try and build your own and play around because only them do you know what the problems are. :slight_smile:

1 Like

Thanks!

i followed that link

unfortunately i got confused and intimated

i a not sure what i am looking at

is there a simpler way to attain the appropriate code? another resource?

maybe provide a codepen?

again, i thank you!

Go to https://github.com/robinpoort/vanilla-js-responsive-menu.

Click on the “Code” button and choose “Download”.

Save the .zip folder and extract the files.

You now have a fully working version to look at and play with.

You only need to edit the HTML to show your own links, and the CSS to match your styling. There should be no need to touch the JS. Once you have the menu working as you wish, you can copy it to your site, remembering to link to the JS files, too.

2 Likes

MANY THANKS!!

if needed, i will follow up :grinning:

do i owe you a $0.25 now?