Shop More Submit  Join Login
×

:iconbradleysays: More from bradleysays


Featured in Collections

Gallery CSS by IridescentStardust

CSS Tips by poserfan


More from deviantART



Details

Submitted on
November 19, 2012
Submitted with
Sta.sh Writer
Link
Thumb

Stats

Views
7,346
Favourites
105 (who?)
Comments
33
×

CSS Did You Know? - November 20, 2012

Journal Entry: Mon Nov 19, 2012, 8:54 PM
:iconujz:
Drop-down Menus (non-dA)

This is going to be a tutorial on CSS drop-down menus. You also must understand that this tutorial uses some fairly advanced CSS which have not been explained; so new readers or beginners may have to read through the previous articles to understand this. Unfortunately the previews don't work with deviantART journal skins, so instead I have included a image of what we will create :peace:

What we will eventually create




The HTML code


Lets start with the basic HTML code for a navigation. This is quite easy to understand I guess. The <nav> code states that this is a navigation and we will be using a simple list structure in-order to get the menus.
The <ul> code states that this is a list and the <li> creates the main list items. The <ul> inside the <li> tags creates the sub lists items or in our case the sub menus.



<nav>
<ul>
<li><a href="#">Deviant</a>
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Groups</a></li>
<li><a href="#">Settings</a>
<ul>
<li><a href="#">Upgrade</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Messages</a></li>
<li><a href="#">Prints</a></li>
</ul>
</nav>



The full CSS code


Now that we have the basic HTML structre ready we can style each of the list CSS properties inorder to create the menu. The CSS code here is going to be a bit lengthy and might be confusing, I'll try my best to explain each bit afterwards but the truth is if you look carefully at the CSS and read it line by line its not too hard to understand. :)



nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}

nav ul {
background: #617566;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
background: linear-gradient(top, #405147 0%, #617566 100%);
background: -moz-linear-gradient(top, #405147 0%, #617566 100%);
background: -webkit-linear-gradient(top, #405147 0%,#617566 100%);
border:1px solid #2b3432;
padding: 0 20px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
color: #c0d0c1;
}
nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
float: left;
}
nav ul li:hover {
background: #3c4441;
border-radius:0px;
}
nav ul li:hover a {
color: #c0d0c1;
}

nav ul li a {
display: block;
padding: 10px 40px;
color: #c0d0c1;
text-decoration: none;
font-family:Arial, Arial, Helvetica, sans-serif;
}

nav ul ul {
background: #3c4441;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow: none;
padding: 0;
position: absolute;
top: 100%;
border:none;
}
nav ul ul li {
float: none;
position: relative;

}

nav ul ul li a {
font-size: 12px;
padding: 7px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: linear-gradient(top, #518fa1 , #39798d );
background: -moz-linear-gradient(top, #518fa1 , #39798d );
background: -webkit-linear-gradient(top, #518fa1 ,#39798d );
color:white;
}

nav ul ul ul {
position: absolute; left: 100%; top:0;
border-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
}



If you do not understand any of the CSS properties used above I suggest you read through the previous articles which explains all these properties and how they are used (links to previous articles can be found at the bottom).

Now let me explain the essentials of the CSS so that you can get your own drop-down menu customised :)
Firstly we are going to hide the sub-menus using some advanced selectors which will keep the <ul> within <ul> hidden and only show up when hovering over the main menu item (<li>).


nav ul ul {
display: none;
}

nav ul li:hover > ul {
display: block;
}



Now we can style the main menu using the code below: In this case it's the main preview of the menu before you click or hover or anything. You are free to style this in anyway you want in order to get the desired effect. But I suggest that you leave the display, position and line-style unchanged, as these have got nothing to do with the style but simply keep all the content in place.



nav ul {
background: #617566;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
background: linear-gradient(top, #405147 , #617566);
background: -moz-linear-gradient(top, #405147 , #617566 );
background: -webkit-linear-gradient(top, #405147 ,#617566 );
border:1px solid #2b3432;
padding: 0 20px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
color: #c0d0c1;
}


The CSS gradients used here are a bit different from how you may use it on deviantART, I have repeated the background gradients a few times to make sure its compatible on all browsers. However on deviantART you only have to state: background: linear-gradient(top, color, color); and it will automatically add all the other code.

The submenu items can be styled using the CSS code below:


nav ul ul {
background: #3c4441;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow: none;
padding: 0;
position: absolute;
top: 100%;
border:none;
}


For those of you who may wonder what the nav ul ul;its an advanced selector which allows you a style a element in a element. Here it means that you are styling the <ul> in the <ul> which is within the <nav>.

Once you have edited this CSS in your own creative style you have your very own dropdown menu! :happybounce:
I did this tutorial as someone had requested for a drop-down menu tutorial; I hope you found this useful and if you get into any problems with the CSS please do comment here or send me ( UJz ) a note.


:iconbradleysays:
CSS Resources on deviantART

In this section of the article, I will share a list of places on deviantART that have CSS resources.

  • eCSSited - The group aims to be your first choice CSS resource, collecting useful tutorials and guides. You can find all of the tutorials in their gallery here.
  • ginkgografix - Without question, Anne has the most amount of CSS tutorials/guides in her gallery. I highly recommend checking out her tutorials folder, even if you're a CSS expert, you will more than likely learn something new.
  • deviantCSS - is another group, though not primarily for educating deviants, is still a great resource. Check out their blogs on what CSS cursors and fonts are compatible with deviantART.
  • Browsing deviantART - Looking for something in particular? There may be a tutorial that meets your needs here.
  • CSS Did You Know? - and of course, this article series! CSS Did You Know? is posted weekly, so keep an eye out for it by watching bradleysays or communityrelations. :)


:iconbradleysays:
What would you like to know?

CSS will be difficult when you're unfamiliar to it. So that's why we're writing these articles! If you have any suggestions or would like to write a section in future CSS Did You Know? articles, please note bradleysays.

If you write a section for us, you will be credited! :)

:iconexcitedlaplz:
Previous editions

Want to learn more about CSS and how to use it? We've collated all of our previous articles and put them into one document for your convenience.

Read the CSS Did You Know? archive :pointr: here!




CSS Did You Know? is an article series that gives you tips and lessons on CSS. This edition includes Drop-down menus (non dA) and where to find CSS Resources on deviantART.
Add a Comment:
 
:iconiridescentstardust:
IridescentStardust Featured By Owner Mar 27, 2013  Hobbyist General Artist
I don't even know the first thing about CSS but I love to learn about it and hope that someday I can make something cool
And these articles are so well laid out and so friendly I just

I learned about them recently and go OH GOD YES I DON'T HAVE THIS ON FAV'D THAT MEANS I HAVEN'T SEEN IT
XDD :heart: Thank you so much for these
Reply
:iconpimi1023:
PIMI1023 Featured By Owner Nov 22, 2012  Professional General Artist
can be this possible?? omg!! yes it is !! ladygg is helping me with my work codes!!!

i love u so badly!!!

thanks!!!!
Reply
:iconscourgewolf:
Scourgewolf Featured By Owner Nov 21, 2012  Student General Artist
Wow.
It was that simple.
:iconanimeace-plz-i::iconanimeace-plz-t: :iconanimeace-plz-w::iconanimeace-plz-a::iconanimeace-plz-s:
:iconstenciltplz::iconstencilhplz::iconstencilaplz::iconstenciltplz: :iconstencileplz::iconstencilfplz::iconstencilfplz::iconstenciliplz::iconstencilnplz::iconstencilgplz:
:iconstencilsplz::iconstenciliplz::iconstencilmplz::iconletterpplz::iconstencillplz::iconstencileplz:
Reply
:icongasara:
Gasara Featured By Owner Nov 21, 2012
Lovely stuff. Thank you ♥
Reply
:iconssceles:
ssceles Featured By Owner Nov 20, 2012  Hobbyist Digital Artist
Nice! I wasn't aware of display: inline-table; being a thing... and when removed, it now spans the whole area - also nice, if that's what someone needs. All the little things about this make it look great~ from the subtle inset on the box shadow to the gradients!
Reply
:icontrudos:
Trudos Featured By Owner Nov 20, 2012  Student General Artist
Best tutorial I've seen on this yet! Good job! And thanks a lot!
Reply
:iconpiratelotus-stock:
PirateLotus-Stock Featured By Owner Nov 20, 2012
ILU 4ever
Reply
:iconbradleysays:
bradleysays Featured By Owner Nov 20, 2012
:giggle:
Reply
:iconbradleypitt:
BradleyPitt Featured By Owner Nov 20, 2012  Student Photographer
Could this code be used on another Website or can only be used on deviantART? (Will it work?)
Reply
:iconmiontre:
miontre Featured By Owner Nov 20, 2012  Hobbyist Photographer
It depends if the website allows you to use code like this. On a website like Facebook or Twitter, definitely not. The only way to know really is to give it a go. Check first to see if the website allows CSS and HTML. :D

If you're coding your own website, you can of course use these techniques.
Reply
Add a Comment: