Adding dropdown menu to my existing navigation

THANK YOU!!

i will try applying your instructions later today!

some follow up questions :grinning:

i dont understand what a scss file is

how do i know if i should be using a sccs file?

please clarify “remove the source mapping comments”

again, thanks!

Scss are files created by the SASS pre processor which allows you to do things like loops, variables and nestlings among other things.

Before you can use SCSS files they are compiled into raw css files which is normal css and all a browser understands. You cant use Scss files unless they are compiled into css. Some editors and setups can do this at runtime but have to be set up to do this

If you don’t have your work space set up for Scss then you do not need to do anything except make sure you are using proper css. Installing a pre processor is not something that can be done without knowing and requires setting up and installing.

Therefore remove any source map comments from the css like the example I already gave you as that will stop the web inspector looking for the real css.

If you are unsure that what you are looking at is not valid css then run the css through the css validator and you will soon find out.

1 Like

Great news to share!

Your instructions worked!

I have been adjusting the CSS

Please know how thankful I am

1 Like

progress!

(sorry if i got the JS wrong)

i added my HTML and CSS

though i am not sure why the navigation is so close

of course i tried to fix it

I reviewed previous posts here on this topic

I tried using display flex

Space evenly?

maybe?

i did add to the code suggested above, its in title=Item #

is my issue there?

also important, on small screens its a mess

there is a “menu” button and a + sign on the drop down

i am looking for a hamburger and down arrow there

kindly assist

this is an opportunity to grow

yes, i am still learning :grinning:

help me, please

thanks!

Ok, you didn’t really need to change the html at all but just put in your links and destinations. You seem to have removed some of the important classes for the menu to work. You also seem to have removed the js for the menu button that will be used to open the menu on small screens. You could style that menu button to look like a hamburger and it could easily be moved into another position using CSS. You did not need to remove it? :slight_smile:

Lets’ try one or two steps at a time (although I would prefer reverting to my working demo) but let’s try and see what can be done with what you have now.

Why did you remove the class called rm-fullmenu? You can see in the CSS that it is used eveyrhwere. It was in place here:

  <p class="logo"><a href="#">Nature Travelers</a></p>
        <ul class="navigation rm-fullmenu" role="menubar">

That needs to be in place or the drop down styles won’t work.

Secondly, and this is a design issue, your verbose text on the top menu is not conducive to a single line top navigation with drop down. It won’t work as a top bar menu as the lines are too long or would need to wrap really awkwardly.

This is your nav at present.

That is ugly and unusable as a dropdown. You would be better of with a more fluid type of navigation rather than a top bar navigation.

I would suggest that you change the menu items to something like this:

That’s instantly better looking and more manageable without losing much information (and of course the sub links will be revealed anyway so why tell people twice).

If you require the more verbose version then a complete change of design would be required. The reason you have a drop down is so that you can show more menu items but if you are going to name half a dozen of them in the top link that seems to defeat the purpose. Think of preferably single named links appropriate for the top menu items contained within much like in my screenshot above.

So for the first steps I would re-instate the toggle menu button code, reinstate the missing rm-fullmenu class and then shorten the links in the top menu.

Once that is done we can progress to the next step :slight_smile:

Edit: Just to be clear the reason the menu button is missing because you didn’t add the js to initialise the resposive menu.


responsivemenu.init({
  wrapper: document.querySelector(".navigation_container1"),
  togglecontent: "menu",
  sticky: 0,
  //      animateduration: 1000,
  //      subanimateduration: 1000,
  onAfterInit: function () {
    console.log("after init");
  },
  onAfterLoad: function () {
    console.log("after load");
  },
  onBeforeToggleOpen: function () {
    console.log("before toggle open");
  },
  onAfterToggleOpen: function () {
    console.log("after toggle open");
  },
  onBeforeToggleClose: function () {
    console.log("before toggle close");
  },
  onAfterToggleClose: function () {
    console.log("after toggle close");
  },
  onBeforeSubToggleOpen: function () {
    console.log("before sub toggle open");
  },
  onAfterSubToggleOpen: function () {
    console.log("after sub toggle open");
  },
  onBeforeSubToggleClose: function () {
    console.log("before sub toggle close");
  },
  onAfterSubToggleClose: function () {
    console.log("after sub toggle close");
  }
});

The console.log statements can be removed and are just in there for testing.

If you looked in your devtools error console it would show an error and tell you that responsive menu is not defined.

1 Like

Just in case you missed it I added an Edit to the above post concerning the missing toggle menu item.:slight_smile:

ok…

what i am going to do.

i downloaded and extracted the original code from the link and instructions above

i think this is smart… any code i misplaced should be there

i put the ORIGINAL code through chrome dev tools

i am pleased!

the menu button is there and the + buttons are there for the dropdown

i kindly ask how to make a hamburger… especially one that moves from an X to a hamburger, then the reverse… i just think thats cool!!

and the dropdown + to an arrow

i will adjust the HTML for the links… any trouble doing this? anything i need to know?

BTW

GOOD THINKING on making the links less “verbose”. looks clean and more aesthetically pleasing :grinning:

i feel confident i can adjust the CSS to match my color scheme

ok, how do i add more pages?

how do i re-move the dropdown with another dropdown? Item 4

i think just delete it, but…

i dont want to delete things in a way that is disturbs my code

again, i sincerely your time an guidance!

This is the simplest example I have.

When the hamburger is clicked a class is added to it and that class is used to animate the 3 lines into a cross shape.

You will have to use whatever class is currently being added to the menu button when clicked (or its parent) and use that in the actual responsive menu but I didn’t want to confuse you yet by changing my simple demo.

If you look in devtools you can see that the plus is a styled button. I just threw a few styles at it and made it look like this.

It just uses borders to create the down arrow and you can find all directions in this old css tricks article. It is just a matter of changing the original styles and putting in your own as I have done in the css panels of the devtools.

Dropdowns inside dropdowns are basically just nested lists so you remove the whole html for that nested section.

Here is a simplified outline:

<ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>One Nested List below
    <ul>
      <li>Nested</li>
    </ul>
  </li>
  <li>two Nested Lists below
    <ul>
      <li>Another Nested
        <ul>
          <li>DoubleNested</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>List</li>
</ul>

More pages of what? Are you talking about site construction? I think you must mean something else as I believe you already had a site with multiple pages so you should know how to do that.

yes, the item 4 dropdowns are gone

unfortunately we are beyond my understanding and comfort zone :frowning:

i am embarrassed i dont get dev tools

my plan (with your help) is to figure out the the responsive hamburger, arrow

please guide me to that goal

and step back… find where my understanding levels are and resume from there

i sincerely hope i have not bugged you

i did my very best with what you suggested, no luck with a hamburger or arrow

seriously (i have said this before) THANK YOU for your time, trouble and patience

lets figure this out together :slight_smile:

my last hoop to jump through maybe the dropdown active links (on hover and selected link) and positioning the logo

i may figure this out with out you… will cross that bridge if it comes

my apologies if i have frustrated you.

again, hamburger, arrow and go back to an appropriate level of coding for my skill set

maybe the best way is to write a full codepen and i can copy / paste the code

once more, thank you!

lets use this


https://forallthetime.com/

Ok :slight_smile:

One step at a time.

The hamburger CSS from my example above can be ported to the rm-togglebutton code directly. There’s just a couple of tweaks to the css and changing the classname etc. You probably should have been able to do this for yourself as there is nothing complicated here but if there’s something you don’t understand then shout.

Here is the code needed for the hamburger which should be added after the responsive menu code otherwise it will get over-written.

/* hamburger menu */
.rm-togglebutton {
  position:relative;
  background: transparent;
  padding: 0;
  margin: 10px;
  cursor: pointer;
  outline: none;
  width: 30px;
  height: 21px;
  border: none;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  text-decoration: none;
  color: transparent;
  border-radius: 0;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.rm-togglebutton:before,
.rm-togglebutton:after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  top: 6px;
  left: 0;
  background: #fff;
  position: absolute;
}
.rm-togglebutton,
.rm-togglebutton:before,
.rm-togglebutton:after {
  transition: all 0.3s ease;
  transform: rotate(0deg);
}
.has-opened-menu .rm-togglebutton {
  border-color: transparent;
}
.has-opened-menu .rm-togglebutton:before {
  transform: rotate(45deg);
}
.has-opened-menu .rm-togglebutton:after {
  transform: rotate(-45deg);
}

It will then look like this.

Put that in place and get it working the:slight_smile: we can work on the next step.:slight_smile:

The arrow in the small screen dropdown can be changed from a ‘+’ to an arrow by adding the following code to your demo page.

.rm-subtoggle{
width:0;
height:0;
overflow:hidden;
margin:15px 15px 0 0;
border:none;
padding:0;
border-top:10px solid #fff;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:0;
background:transparent;
color:transparent;
}

It will then look like this:

Screen Shot 2022-01-10 at 18.37.20

YES!!

moving hamburger and arrows achieved!

i am so grateful!

SO GRATEFUL!

you are such a help…

if i had to guess, i suspect you may enjoy helping other coders

ok, code for another page…

i have here (not all the HTML is in there yet)

<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 2">#</a>

got it!

<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 3">#</a>

here Item 3 is the dropdown

then last is Item 4

do i make a

<a role="menuitem" href="https://github.com/robinpoort/vanilla-js-responsive-menu" title="Item 5">#</a>

my question here are the Items order

what do i put where?

maybe its moot? maybe there is no difference

thanks!

If you are talking about the ‘Title attribute value’ then that should be changed to whatever describes the link in the best way. The browser (some browsers) will create a tooltip for it automatically so it’s pointless t have a tooltip that says “Item 4”. You would change it to say something like 'link to old articles" or wherever the link is going.

I don’t use title attributes on links and images anyway as they cause more harm than good. In the demo they are just to help you as a developer see where things are but they can be removed for anchors as you already have text in the anchor saying what it is.

e.g. Why do this?

<a href="/articles.html" title="Link to Articles">Articles</a>

If that’s what you were talking about?

1 Like

ok, titles are gone

the hamburger appears 599 px

i was looking for a media query to adjust that breakpoint

if its there and i missed it, my apologies!

if it is there, where?

or this way…

how to write a media query containing the appropriate code… yes i can write a media query! i just need the specific code…

also, if there is no media query, how did we get the hamburger at 599 px?

Yes its there in the css. The demo has set it at min-width:600px.

e.g.

@media (min-width: 600px) {etc..}

You will need to find every instance of those (there’s half a dozen or so) and change the 600px to whatever suits your design.

Mote that the min-width:600px refers to screens 600px or larger. 600px is the point where the large screen kicks in. The small screen is the default for that menu so you are coding for the large screen above 600px (or whatever you change it to).

I’m not sure why they made it that awkward to change the media queries but they may have been part of the original Sass/Less files and probably could have been done in one place.

Significant progress!!

please see https://forallthetime.com/

question for you:

how can i make the drop down links #745d46 on hover and current link?

i am having trouble doing this on the drop down links

many thanks!

Not sure if this is what you mean but you can do this:

.navigation_container li:hover ul a{
background:#745d46;
}
.navigation_container li:hover ul a:hover{
background:#ac7e54;
}

no luck

i can be more clear

i want the drop downs to have the same behavior as the home link for example…

when in use, hovered or not in use

if the code you supplied does this, it didn’t work… is there a specific place i should put your code?

thank you :grinning:

Hi,

I see this for your current behaviour.

The top menu items is hovered and the menu and whole dropdown to turn to light brown but hovering on the dropdown (Nature reserves in the screenshot) changes the link to dark brown.

With my code added the behaviour is as shown below.

The dropdown is dark brown and the link hovered (Nature Reserves) in the drop down goes to light brown. You can see my code added in the Edit CSS window on the right.

If that’s not what you wanted then I may need a bit more guidance :slight_smile:

The code would be added after all the original code as it over-rides some rules.