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
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!
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.
#eCSSited
#communityrelations
#DevNews
#deviantART-Related
#dAWishingWell
#SolutionsSanctuary
#CSS-DYK
`anmari has been spreading her infectious positivity throughout our community for over 6 years. Throughout this time Ana has been at the core of all things devious, passionately developing an eclectic gallery, helping organise devmeets, participating in chat events and also recently completed dedicating her time as a Community Volunteer. We are absolutely delighted to bestow the Deviousness Award for May 2013 to `anmari, congratulations! Read More
Sta.sh
Announcing our Creative Grants recipients
General Photography from 3wyl
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
i love u so badly!!!
thanks!!!!
It was that simple.
If you're coding your own website, you can of course use these techniques.