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/

2 Likes

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?

WOW that’s a lot of code

to be honest, i am a bit intimated… a lot to learn here!

asking for help

i cannot understand how to make an active link a color, #ac7e54

also, spacing out the links

and having the link’s color fill from top to bottom as https://botanicgardentravelers.org/, and have the text centered

i have put some time into trying to understand AND experimenting with this CSS, but need help at this point

thanks!

HA!

yes, i gave you no code to look at!

coming soon!!

You seem to have copied the CSS into the JS panel, rather than the JS. smile

a:active {color: #ac7e54;}

Assuming you mean “active” (i.e. as you are clicking it) and not the link you are currently on.

Please explain how you want the links spaced out. If you are trying to replicate the layout you already have, then it would make sense to use the same number of links and the actual text in your CodePen.

How should the “Nature Travellers” text be positioned?

You don’t seem to have included all the necessary files,

Start from a good working copy before you start to adapt it to your needs so that you know it is working.

This seems to be the code you need although I only copied it from the demo and did not download it (life’s too short).

Open and close the browser to test the mobile version so that you know what should happen,

Fork that as an example to work with and to refer to. The rest should just be using CSS to change the look of menu to suit your purpose.

1 Like

I’ll give you a start with the menu to use flex instead of floats but I’ll leave all the colours up to you as that should be something you can work out.

BINGO!

thats perfect!

though when i put your code into my vs code it doesn’t match

i copy and paste the code!

WIERD!

the only difference is the link not going from top of the nav to the bottom

also, when i put MY code into a codepen, it works!

i deduce i have a problem with vs code… i tried everything i could think of

your $0.02 please

BTW, i am looking to actually understood the code! if you can, kindly tell me what lines in the codepen you changed to be fixed!

many thanks!!

You must have missed something out or perhaps are linking to an old version. Note that the js should be at the end of the html but that would not change the css issue.

You’ll need to upload the code to a real server and then we can debug from there. If its working in codepen then there’s something different in your local version that won’t be possible to diagnose from here. Open up your web inspector and inspect the menu items and see if you can see what’s stopping it from working.

I assume you are checking in a real browser and not just the editors display?

I removed the height:40px for the menu, and its items but only in the media queries for larger screens. This left the mobile screen untouched. I then removed the floats from the menu and instead set the ul to display:flex which automatically lines up the list items, I also set the list items to display:flex so we could get 100% height on the anchors.

This was the main change:

@media (min-width: 600px) {
  .navigation_container {
    display: flex;
    min-height: 5rem;
  }
  .navigation_container ul {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .navigation_container li,
  .navigation_container a {
    display: flex;
    height: 100%;
    align-items: center;
  }
}

I probably tweaked some margins and padding but can’t remember. I did remove the margins from the p.logo otherwise that pushes the whole header bar down due to collapsing margins.

I set a min height for the navigation container but you have to ensure there is no top or bottom padding on it otherwise the links can’t be full height.

I also removed the positioning from the logo because flex will align it vertically central without needing to be positioned.

Become familiar with the web inspector and you can inspect styles and see what does what and you can also change styles/values in the inspector to see what happens.

2 Likes

no go :frowning:

i tried a real browser, same issue

kindly see https://forallthetime.com/

note the nav is not the same, again i am after the link to full, top to bottom

also, i tried un-installing and re-installing vs code, no luck

i have heard of something called “revo” (sp?) which wipes out the program you want gone completely away

then i would re-install vs code

please help!

thanks!

The js is adding a class of js and using that class to set to display:block when we want display:flex.

Add flex in 2 places as shown here:

.js .navigation_container {
  display: none;
  /* 1 */
}
.js .navigation_container.rm-initiated {
  display: flex;
  /* 2 */
}
@media (min-width: 600px) {
  .js .navigation_container {
    display: flex;
    /* 3 */
  }
}

Check that the above code hasn’t been added more than once as there is something odd but it may be because it is showing as a scss file. If you are not using scss then remove the source mapping comments.

Anything like this:

/*# sourceMappingURL=responsivemenu.css.map */

This css seems to be a duplicate of what’s already in the other css file.