How To Add Dropdown Menus In Your Pages

WELCOME

Welcome to Episode Two of our Summer Page Design series!

In this episode we're going to add some handy dropdown menus to a page, which you can use to display things like FAQs, bullet points, Module contents, a list of Lessons, or anything else you'd like to tuck away out of sight.

In this tutorial you will see how to do it using simple HTML that you can copy and paste from right here in this blog post, and in the video I'll show you how to edit the text to make it say whatever you want.

GET CUSTOM HELP

If you would like to really dig into this and make your own MV look spectacular, please visit Juci's Summer of CSS Magic program.  You can get individual help from a real Pro to setup your site with the right colors, branding, Accordion dropdown menus and more.

CODE

Copy the code below and paste it into the Source Code editor of your Page, just like you see in the video.  

Remember you can delete the text open="open" in the top details Tag to make the Dropdown menu load in closed form.

AUDIO

TRANSCRIPT

Hey, I'm Steve knots. Welcome back to the User Experience podcast. And today we are going to explore drop down menus as part of our summer series of page design tips. You can see this FAQ section has these cool little triangles, where I can ask a question like, is it PC or Mac? And do a little drop down to give the answer? How long does the course take drop down? There's the answer, which makes your page much easier to manage on the eyes. If people are curious, they can open the drop down and get a little excited to see the answer. And if they don't want to read all those things, don't make them scroll down five miles of texts, because it's just going to be too much on your page.

So these are really easy to make. It's a quick HTML thing that you can paste into your page. And I'm going to show you how to do that today as a part of our summer CSS series. And actually, it's not all CSS, some of its HTML. Don't worry about if that sounds intimidating, I'm going to show you step by step how to make these little pro tips to dress up your MemberVault pages, sales pages, products, lessons, even more blog posts. Now these these can all be found every episode we're doing this summer from June in July, can be found under this blog post called CSS library of goodies, which is a collection of the project the description where you can get more help, and the episode list like replays. So I started off introducing it on May 31.

Last week, I did how to add custom buttons to your pages. And today we're doing some drop down menus, which will appear in the episode list after we're done. Now, if you would like to really deck out your page and take this project a little bit farther, I recommend you get together with Juci from code and glitter, who is our MemberVault code genius are one of them. And she has put together a program to take you through this step by step with help for your branding, your colors, your customization, your questions and answers to help you get this looking good because I can show you what I did. And I can tell you, hey, this technique exists.

But honestly, she is the better programmer to take you through how to actually do it in your project with much better help than I have. So there is it's a paid product, you can look through the program details. And just for an example of her skills.

Look at this, she has some drop down menus, like accordion style in her sales page. How cool is that? Modules, content, colors, matches her branding. It's amazing. And she is so hilarious. Her sense of humor is really fun to work with. I've gotten to know her better as a part of doing this product project. And I cannot recommend her highly enough. It's a no brainer, sign up for Juci's program summer of CSS magic and get some help making your pages look amazing. Now I showed you at the beginning that we're doing some drop down menus, like I have an FAQ. For this episode, I built an absolutely simple page on my MemberVault called the drop down menu page, where I can show you what it's like making a drop down menu. So again, to do this, I started by going to content pages. Like I set up a new page, it's called the drop down menu page URL drop down, it's invisible, because I don't really want my people seeing it. And then in here is where we put the drop down menu HTML.

And on this page, I want you to know I embedded this little section to display the code. So I can simultaneously explain what the code looks like when you copy and paste it and what the result looks like up top. Okay, so drop down menu page is the page title. Let's look at these words making a drop down menu. Where do you see that in this code window, you see making a drop down menu. So the structure of this drop down menu in code language. It starts with the details tag saying that okay, we're going to do the word details. As a tag says we're going to do a drop down menu with details inside. Then there's a tag called summary, which means when the menu is closed, the summary is the part up top, which kind of makes sense summaries the details. And then if you want more summary is up top. And if you want more of the details, you hit the arrow to get the details. You'll also notice there's a word strong on here that makes this text boldface, which is optional, but you know, just point that out. Next we have the bullet point list. You can see these are bullet points to get those little little bullet points. You start with UL to make a list and then each item gets its own li with an open and closed LI tag that forward slashes always closing the tag. And you can clearly see the words open the source code open paste, edit, closed preview fix, jump up and down with happiness. So there's our bullet point list open paste, edit, closed preview fix, jump up and down with happiness.

PRO TIP: Keep another tab open to preview your page.

So as we are making our edits in our source code window, we want to keep another tab open so we can refresh and watch what happens. Okay, I hope you're with me so far. All I told you is that when you're looking at the blog post where this episode is published, you will see this little window with some text in there. And all you have to do is what I'm going to do right now. copy copy, copy, select all copy out of here. I'm going to go to our page and actually enter another menu. So let's make some space.

PRO TIP: the hr tag makes a horizontal divider line. I just pasted our code, save, double save to make sure, go back and refresh, shrink. And there we go, we have another drop down menu. So let me show you how easy it is to customize this. And in the final code I give you it might have this text or it might look a little bit different. But let's look at editing our drop down menu. Fortunately, once it's in here, editing is really easy. I want the title to say that and remember protip make one change, and preview it. Until you're good at this stuff.

Make sure you're previewing what you do is so you don't mess up the whole entire thing making one edit. So I edited the, what's that called up there the thing where you close the thing, the summary, I edited the summary field. Editing, the summary field is editing. The summary is really easy. Let's save that, just to reiterate. That section up top when the menu is closed is called the summary. Now what if I don't want the bullet point list? All right, you know what that bullet point list is getting on my nerves. And I'm going to select everything with the UL section that is telling you it's a list. And I'm going to make some text that goes in between the paragraph tags. So if you want to write some text, put a p tag above it and a closed p tag. This is what I mean when I say p tag it's the two brackets with a letter p inside for paragraph. Inside these two brackets, you will experience the most amazing story ever heard by any human ears on planet Earth, or any where else or even inside, like a really big, big library.

All I was doing there is typing enough text that it would be too much to see on the page, we want to hide it inside a drop down menu. Let's preview and see what we get. Say double Save. Next tab, refresh. Editing the summary is really easy. Inside these two brackets, you will experience the most amazing Okay, so there's my story, you know, that's not really gonna go on my website, but it's kind of funny. And then I can drop it down. So I have making a drop down menu with bullet points. And editing the summary is easy. And then inside the two brackets, which are the p tag, that was easy. And let's just go back to our code page one more time. This is what you're looking at in like text editor mode. This is our source code mode. And let's review details tells you we are making a drop down menu summary is the line of what you see when the menu is closed. After the summary comes the stuff inside. This is an example of a bullet point list starting with UL giving each line on a line closing the UL. And then at the end, of course, you want to close the details section. So that this whole chunk is your one drop down menu item. Okay, it starts with details ends with details. Next, what do we have on the page? One drop down menu, there is a gray horizontal line. It's faint, but it's there. That comes from the hr tag right here.

And then another drop down menu details. Summary editing, the summary is really easy. We see that in the summary field. Haha, we do editing the summary is really easy. And then the paragraph tag where inside this drop down, we have a sentence of text. Inside the drop down we have a sentence of text the most amazing story ever heard by human ears on planet Earth.

Okay, that's a pretty good story. And what do we do at the end, we close the details tag and it's time for another pro tip you might notice I'm putting each tag on a separate line. So it's really easy to see details summary, bullet point list, close bullet point list, close details, horizontal divider. Next details one, if you work with your HTML that way and think vertically, it's easy to separate the sections and just see what's happening. So you can make the edits you want. Update your stuff, make it look cool, and not get lost.

Finally, just to explain this part about what the code looks like, here, we have a little section, a p tag for new paragraph strong for boldface, the words what the code looks like, I just want to explain why you're not using this part. Okay, here's our sentence what the code looks like. And there's this little box with the stuff in there. The only reason this is here is because I wanted to show you on this video, what you're going to see on the blog post when you copy and paste. And if I put all this stuff that's highlighted, if I just put that into the text editor here, MemberVault is going to translate it into the right code. And you're only going to see the drop down menu you wouldn't see like the brackets and the word details in the word you know the end tag and stuff. So you're not going to be doing when you're making your own dropdowns you're not going to be using this stuff with the word script.

None of that not happening for you don't worry about it doesn't need to happen. It It's not part of your drop down reality. So that is basically how you get going. Now I want to point out one thing that I had to figure out, when I refresh, these drop down menus are open, okay, which actually doesn't serve the purpose of having a compact, small amount of space with stuff nested inside it. If we go back to my sales page over here, the FAQ is when I refresh these load up closed, I don't want these to load up with everything open like that, because it's just like, it's like going into a kitchen and every single cabinet is open, and you can see all the cops and everything and it's like, ooh, close those cabinets. You know, it's kind of like the doors are open, and you can see stuff, you wanted to be closed.

One time, my friend told me that if you walk in a kitchen and all the cabinets are open, it means the house is haunted. I don't know, if you want to believe that or not. So how do you make your page refresh with the menus closed and out of the way? Well, let's go to the source code.

And notice that the details tag has a little specifier that says open. I'm going to remove that. So our first drop down menu, I remove the part that says open our second drop down menu, I'm going to allow that to remain. Save save next tab refresh. And look at this, the top one refreshed automatically with the menu closed, the bottom one still has the menu open or the triangle pointing down. We are not going to tolerate that triangle in that situation. So I'm scanning to find my details thing. Here it is details open. Let's remove that qualifier. I'm not even sure the right programming word for what that extra thing is, but I deleted it.

Now we have a plain details tag, go back here and refresh. Aha, now our menus, refresh on the page with the triangles closed, so that people can see making a drop down menu editing, the summary is really easy. what the code looks like, I wonder if we could put this code inside a drop down and make what the code looks like into a summary. How would we do that problem when you're on your page, and there's a chunk of content and it's too big, and you wish you could you could collapse it into a triangle, here is the solution to do that. So let's identify the area that we want to contain. Alright, it's it's this whole thing, what the code looks like, with the script thing underneath it. So let's try this and you're watching me do this live. I didn't do this in practice, so it might not work. We start with details, we end with details right away when you put in an open tag with the end tag afterwards. And this section what the code looks like instead of paragraph. Let's just change that word to summary.

Now we have this word detail is showing us there's gonna be a new drop down menu. The part we see when the menu is closed, is going to say what the code looks like inside boldface. Then there's a paragraph with a little script thing under there. And I'm guessing we could maybe even remove the paragraph tag. But let's test one thing at a time. Save, save, save, refresh, go, Ah, it worked. I'm serious. I'm this is my level of programming, I explore I experiment, I already backed up everything, you know, I made a copy of my whole page and saved it so I can get back here if I need to. And now we have a cool little drop down of what the code looks like. This actually looks like a tutorial on the drop down menu page, making a drop down menu, bullet points for a quick list. Here's what you do verbs open paste, edit, closed preview, fix, jump up and down with happiness.

Okay, editing, the summary is really easy. And you know, it's easy because it's in all capitals. And that's where I showed you how you could put in a paragraph of text, like possibly read this for an introduction to the course and you drop down and you could read it. And then we have what the code looks like, where you see how simple it is to actually copy and paste that code and take it over here to your code editor, make sure you hit the little brackets. And then we pasted it in there and did some reverse engineering to understand what are the elements of the drop down menu? What how do we edit them to get what we want? And how do we make a new drop down menu surrounding content we already have, which I think that last part might be the most valuable example because what this means is you don't have to go and recreate new stuff in your drop down menu, you could go to your page, like I have here and find a chunk of stuff that's maybe a little bit too big. For example, introduction problems or any challenge. That's a lot of texts.

I don't know if that that might be too much text. So maybe I could come up here and surround all these blocks with all these words with a drop down menu. So what I would do is go into the source code above the word introduction, I'd put the tag that says details. I'd leave everything the same. And then maybe after the word challenge after here's how you can do that. Underneath that part in the code editor. I just go with brackets and details and get that whole thing contained inside the field of drop down menu. Now this might take a little bit of practice experience and guidance for you to get it working in your member vault. So when that situation arises, and I hope you try this on your own, I really want you to do what I'm doing. Play with it, get it working at a simple level. And then when you want to expand with styling, color headings, making it look cool, and putting it inside of frame any of that stuff that's better than I can teach you in these videos. What you should do is visit Juci's product, summer of CSS magic, sign up with her.

She's doing weekly workshops with these code snippets and tutorials on how to customize it at a higher level with much better education than I have on this stuff. I think you could tell I can do it. But I'm not saying I can teach anybody else really how to make it work inside of your MemberVault hub or anything. So sign up for Juci's, summer of CSS magic. And then I'll see you next week for episode three, where I forgot to check what we're doing.

It could be the custom background with the drop shadow. But Tune in next week to find out. We're all about transparency here on MemberVault. I'm not gonna lie to you. If I can't think of something I'll tell you. I don't think it's not at the top of my head. Oh, wait, I could find the answer though. That's a good transparency thing. So you know, I forgot. And I think I can find the answer. So this week, we're doing fancy FAQ. So the drop down next week, eye catching page sections. Yes, more than black text on a simple gray background. In this module, you'll learn how to create some gorgeous boxes that lead your audience's eyes to show off your products. amazingness that is this gray box around all these words with a little drop shadow.

So there you go. Problem solved. I didn't have to make any mistakes. I did all live on camera. You got the benefit of this tutorial about drop down menus, editing the summaries really easy. Making your pages look cool. And I really hope you enjoyed this as much as I've had fun doing it. See you next week. Thanks for being part of MemberVault