https://www.reddit.com/r/CSSTutorials/comments/mwpw8/tutorial_sticky_dropdown_menu/
created by Raerth on 01/12/2011 at 22:53 UTC*
25 upvotes, 10 top-level comments (showing 10)
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 1 Header
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: `80`px;
}
`/*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: `70`px;
left: `40`px
}
`/*turns first paragraph into menu title*/`
.titlebox blockquote:first-child p:first-child {
margin-top: 0px;
padding: 5px;
float: left;
font-size: `12`pt;
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:`100`px;}
.titlebox blockquote ul:nth-of-type(2) {width:`100`px;}
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.
Comment by HarryMuffin at 01/12/2011 at 23:37 UTC
8 upvotes, 0 direct replies
This is awesome. Thank you.
Comment by TheLegitMidgit at 02/12/2011 at 03:55 UTC
5 upvotes, 0 direct replies
This is really awesome. Great job!!!
Comment by soupyhands at 02/12/2011 at 00:13 UTC
4 upvotes, 0 direct replies
Thanks for the info! Very cool stuff.
Comment by psycosulu at 02/12/2011 at 11:14 UTC
3 upvotes, 1 direct replies
Sorry, another question.
I have no idea what I did wrong, why is it doing this?
Comment by psycosulu at 02/12/2011 at 10:18 UTC*
1 upvotes, 0 direct replies
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!
Comment by ladfrombrad at 04/12/2011 at 13:18 UTC
1 upvotes, 1 direct replies
Would it be possible to incorporate the hot/new/top into a dropdown too? I'm liking what /r/newcastle[1] 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.[2] Looks a little cleaner I suppose :)
2: http://c.thumbs.redditmedia.com/egOIezmiuA6Zvr02.png
Any chance for a sprite creation and positioning tutorial next?
Comment by ChingShih at 20/01/2012 at 04:28 UTC
1 upvotes, 0 direct replies
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[1], 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.
1: http://www.reddit.com/r/CSSTutorials/
Is there anything that can be done to get links to stay on the same line that they're entered on?
Comment by aagavin at 09/02/2012 at 16:19 UTC
1 upvotes, 0 direct replies
Oh Oh what did I do wrong? it appears like this[1] in my sidebar?
1: http://f.thumbs.redditmedia.com/GmNwXY52jLoggmy_.png
Comment by jaxspider at 23/05/2012 at 21:50 UTC
1 upvotes, 0 direct replies
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.
Comment by [deleted] at 02/12/2011 at 09:17 UTC*
-5 upvotes, 1 direct replies
[deleted]
