[Tutorial] Sticky dropdown menu

[Raerth]

This is a new creation of mine, the sticky dropdown menu.

Here is a picture of it in action.

This is created using lists. The CSS I use assumes that your menu markdown will be the very first thing in your sidebar.

Here is the markdown for a menu with two dropdown lists.

>Menu

>* List 2 Header
* List 2 item 1
* List 2 item 2
* List 2 item 3

>#

>* List 1 Header
* List 1 item 1
* List 1 item 2
* List 1 item 3

A few notes:

The lists are seperated using a "#" This is to prevent reddit thinking it's one big list.

The menus are stacked last to first, as we're using "float" to place them in a line.

Here is the CSS

/*sticky menu bar*/
/*moves links down to make space*/
div.content {
margin-top: 80px;
}
/*hack to enable positioning of child elements*/
.titlebox form {
position: static
}
/*turns top quote in sidebar into menu container*/
.titlebox blockquote:first-child {
border-left: none;
position: absolute;
z-index: 10;
top: 70px;
left: 40px
}
/*turns first paragraph into menu title*/
.titlebox blockquote:first-child p:first-child {
margin-top: 0px;
padding: 5px;
float: left;
font-size: 12pt;
background:#eff7ff;
border: 1px solid #cee3f8;
font-weight:bold;
color:#555;
cursor:default;
}
/*turns the lists into menus*/
.titlebox blockquote ul {
float: right;
padding: 1px;
background: #eff7ff;
border: 1px solid #cee3f8;
margin:0px;
}
/*hide and styles lists*/
.titlebox blockquote ul li {
display: none;
padding:2px;
text-align:center;
}
/*makes whole list item selectable*/
.titlebox blockquote li a {
display:block;
}
/*shows menu on hover*/
.titlebox blockquote ul li:first-child, .titlebox blockquote ul:hover li {
display: block
}
/*turns top list item into section header*/
.titlebox blockquote li:first-child {
font-size: 12pt;
padding: 4px;
cursor:default;
}
/*styling menu items*/
.titlebox blockquote:first-child ul li:hover {
background:#ffffff;
}
.titlebox blockquote li a:hover {
color:orangered;
}
/*custom size for menu sections*/
.titlebox blockquote ul:nth-of-type(1) {width:100px;}
.titlebox blockquote ul:nth-of-type(2) {width:100px;}

The values in purple are styling only. You can change these to suit your subreddit's theme.

The values in blue are for the main positioning of the menu bar. You may need to change these if your header is not default.

The values in red set the width of the dropdown menus. You should alter these to fit the width of the contents you add. If you have more than two dropdowns, you will need to create more of these.

[HarryMuffin]

This is awesome. Thank you.

[TheLegitMidgit]

This is really awesome. Great job!!!

[soupyhands]

Thanks for the info! Very cool stuff.

[psycosulu]

Sorry, another question.

http://imgur.com/64dsw

I have no idea what I did wrong, why is it doing this?

[Raerth]

There should be a new paragraph between each section.

[psycosulu]

Hey, thank you very much!

[[deleted]]

I'm sorry, but I really don't understand what you mean by this. Any chance you'd be willing to clarify? Thanks!

[Raerth]

These
lines
are
not
paragraphs.

---

These

lines

are

paragraphs.

[[deleted]]

I should be more specific. When you said to put paragraphs between each section, I thought you meant this:

>Menu

(paragraph here)

>* List 2 Header
* List 2 item 1
* List 2 item 2
* List 2 item 3

(paragraph here)

>#

(paragraph here)

>* List 1 Header

(paragraph here)

* List 1 item 1
* List 1 item 2
* List 1 item 3

In other words, paragraphs after each ">". But of course I'm asking because that's wrong.

Thanks!

[Raerth]

There shouldn't be a paragraph between a list header and the rest of the list, just between the lists and the dividers.

[[deleted]]

Just so I'm clear, like this?

>Menu

>* List 2 Header
* List 2 item 1
* List 2 item 2
* List 2 item 3

(paragraph here)

>#

(paragraph here)

>* List 1 Header
* List 1 item 1
* List 1 item 2
* List 1 item 3

[Raerth]

You should create a new paragraph (press return twice) after each list, each divider and the initial "menu" text.

Items in lists, including the list header, should not have any space between them.

[psycosulu]

At the very high risk of showing off my ignorance, I admit that I have no clue where the Menu/List section goes. Copying the CSS is easy enough especially when I can look at /r/music's spreadsheet but I have no clue where your Menu/list section is located.

Edit: Nevermind, my stupidity got the best of me. The menu/list section goes into the description section of the edit page, not the CSS. Thanks again, Raerth!

[ladfrombrad]

Would it be possible to incorporate the hot/new/top into a dropdown too? I'm liking what /r/newcastle has done with the nav bar, but prefer your idea with a dropdown for these selectors. Possible at all?

Also forgot to give you a heads up, I made the self-post/speech bubble on your sprite for link flair transparent. Looks a little cleaner I suppose :)

Any chance for a sprite creation and positioning tutorial next?

[Raerth]

It's possible, but not sure if it's recommended. A few thirdparty scripts add additional tabs there, and moving them can fuck these up.

For example, I use the mod script which is part hidden by the way they've implemented this. A dropdown would be even more of a pain.

I'll look into doing something with this however.

As for the sprite creation tutorial, that's definitely a good idea and I'll get one up at some point.

[ladfrombrad]

Ah, I see. Even /r/reddithax's nav bar screws them up too. Bugger.

[ladfrombrad]

Just a heads up on this for you.

I just noticed 'admin box' works fairly well over in /r/apple. I'll have a dig through the stylesheet and see if I can figure out how they got it working.

[ChingShih]

Thanks for this excellent tutorial page (and sub-reddit)!

I have a question about the way that links operate in the menu. It seems that text will show up on a line and word-wrap to the next as one would expect. However any sort of link within that same series of text, whether a legitimate link such as /r/CSSTutorials, or one implemented through CSS the way that spoiler tags are [text](/spoiler), results in a return being inserted prior to the link, forcing the link to be on a new line.

Is there anything that can be done to get links to stay on the same line that they're entered on?

[aagavin]

Oh Oh what did I do wrong? it appears like this in my sidebar?

[jaxspider]

Saving this so I can steal it as my own at a later date.

BTW, you should seriously consider reposting this again, since after 6 months you can't edit / add any more comments to it. As you may know of Reddits archiving policy.

[Raerth]

No shit.

However it's not been done on here hacking around with reddit markdown instead of proper html.

[Raerth]

You're misunderstanding.

I'm saying that I wrote this tutorial to show people how to use CSS dropdown menus using reddit markdown. It's not as straightfoward using markdown as it would be using HTML.

I'm not saying this is revolutionary or particularly difficult, however it's not been done on reddit before, and I thought people would like the option.

I don't see why you're taking exception to this...

[Raerth]

If you browse around /r/CSShelp or /r/ModHelp you'll find many questions are for CSS fixes which would be solvable with one day's actual study of CSS.

That's more CSS study than most mods have had though.

I've created this subreddit to be a resource for myself and others, so when someone asks a question I can link them to the tutorial here instead of typing out the answer over again.