How to enable dropdown menu

Posted 07/03/22 by Kasey Norton

Dan I have added enableDropDown in site.config but I'm not sure where to put the markup on the site.


Posted by Dan Vis on 09/02/20
Sounds good...
Posted by Kasey Norton on 09/02/20
Dan Thank you! It fits perfectly!
Posted by Dan Vis on 09/02/20
Pretty easy Kasey. You go to code.embed.dropdown, which sets the css (styling) and js (javascript) for the dropdown menu. There you'll see a setting that says "font-size: 1.6em;" which just means 1.6 times the normal font size. It was 1.7. By resetting to 1.6 it fit.
Posted by Kasey Norton on 09/02/20
Dan I edited to add a few more main tabs and I'm wondering how I resize the tabs so they fit, stretched evenly across the top? Right now the START tab is on a separate line...
Posted by Dan Vis on 08/31/20
Remember there's always an undo action Kasey!

But seriously, this bit of code is a bit tricky and it just takes some time and know how to finess it to do other things. It involves html, css, and javascript--and everything has to be working together, just right.

I've got it more or less fixed up for you. Feel free to suggest more improvements as it doesn't quite look as good as the old tabs. But I'm not quite sure what's missing. I don't have a great eye for design...

But I did miss the blue start button and brought that back, just to see if I could. If you meant to eliminate it, you can delete it from block.dropdown or change it to something else...

In light of the other discussion on classes, I'd recommend putting a link to current enrollments and a link to your class list under the training tab. Then we can build those pages and you'll have a way to get to your classes... :)
Posted by Kasey Norton on 08/30/20
PS. I do love the dropdown menu at Boltwire and the design/layout. I tried saving that pice of code you mentioned but alas, it did not go as planned and it's a war zone!
Posted by Kasey Norton on 08/30/20
Dan Ugh! SOS! SOS! I have destroyed my block.tabs by trying to alter to block.dropdown. It looks a mess!
Posted by Dan Vis on 08/25/20
Posted by Kasey Norton on 08/25/20
Dan Wow, yes to that in so many ways!
Posted by Dan Vis on 08/25/20
The human brain has pretty massive data storage capacity. I'm sure you'll do fine Kasey! We just have to learn to think like a computer. Kind of like how we adapt when talking with a person from a different culture. Right? :)
Posted by Kasey Norton on 08/24/20
Dan I'm almost concerned that it doesn't 😂 I'm slowly understanding some of these concepts and I'm hoping my brain doesn't have to offload other impirt info to retain it all!
Posted by Dan Vis on 08/23/20
Glad it doesn't all sound like gibberish to you Kasey. :)
Posted by Kasey Norton on 08/23/20
Dan Thank you! I'll see what I can do with it. Your instructions are super helpful!
Posted by Dan Vis on 08/23/20
Kasey, there is a block called block.dropdown. Just go to your skins, choose neo-side, edit the html, and change the line that says <<block tabs>> to <<block dropdown>>.

Note that this will replace your current tabs. So you will need to edit the block.dropdown page either before or after to get the right links. This might be a good option if you have a lot of menu links.

Note also that there are some styling issues we'll likely have to change. The dropdown menu on the boltwire site for example looks probably more like what you want. Getting that effect requires editing code.embed.dropdown. Here's the code I used on the top part of that page to have it float right, and use different colors:

<style type='text/css'><!--
#dd2 { z-index: 30; color: #cecece; }
#dd2 li { list-style: none; float: right; }
#dd2 li a { display: block; text-decoration: none; padding: 5px 10px; color: #cecece; margin-left: 20px; }
#dd2 li a:hover { background: #eeeeee; }
#dd2 div { position: absolute; visibility: hidden; padding: 0px; }
#dd2 div a { position: relative; margin-top: 0px; width: auto; white-space: nowrap; text-align: left; background-color: white; }
#dd2 div br {display: none;}

You will end up losing your green button. But we could try styling that part of the dropdown menu separately. See the dropdown tutorial in the docs page for more information.

Join Us

To read more posts, or to leave a comment, join our FREE community...