Not exactly like googles of course but it looks nice and will get the job done. So first thing of course is the standard HTML document layout. In the header I placed script and style tags since it's a simple project. It is generally good practice to link to other files though. So first thing is the markup layout and such.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Test</a></li>
<li><a onClick="showDrop();">Drop</a>
<ul id="dropDown">
<li><a href="#">Drop</a></li>
<li><a href="#">Down</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
Since it is a click to trigger the dropdown menu we use javascript for doing that, I don't believe onClick can be done in css, just holding it. So first we have the wrapper unordered list which contains list items which contain links, and the one that houses the dropdown has the onClick event showDrop(); and has another unordered list inside it that also contains list items. Now if you were to look at what you have no you can see it looks nothing like the final product. So we need a good amount of css to make it look right and function. First some simple styling.
body {
margin:0;
padding:0;
font-family:calibri,tahoma;
}
header {
background-color:#181818;
overflow:hidden;
}
header a {
cursor:pointer;
color:#e2e2e2;
text-decoration:none;
}header a:hover {
color:#ffffff;
}
Most of that was personalization but it's supposed to look similar to googles so you can copy that or edit it I don't really care. Next is the more important stylings.
ul {
list-style-type:none;
margin:0;
padding:0;
}
ul li {
float:left;
margin:6px;
}
ul ul {
display:none;
position:absolute;
background-color:#181818;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
box-shadow:0px 0px 2px #000000;
}
ul ul li {
float:none;
}
I will walk anyone that needs it through here. So first we are styling a ul and giving it the list style type of none, which will remove the bullets or whatever is visible. Then we set the margin and padding to 0 to remove any default indentation and such. Next we refer to all list items inside of the unordered list, we float them left so they appear horizontal not vertical. Then we give it a 6 pixel margin so they aren't touching each other. After that we refer to a unordered list inside an unordered list, the one that will be dropped down. We set display to none so it's not visible until we make it visible with javascript. Position to absolute the most important styling for it as it makes it dropdown and not just push everything down. Then a background color to make it blend in with the main bar, again personilization. Then some bottom right and bottom left 5 pixel border radiuses to make it look a bit more clean, and last but not least a small box-shadow to give a bit of a 3d effect. Then our last styling we refer to all list items inside the unordered list that is inside the unordered list. We set float to none, so they drop down vertically instead of horizontally. Thats all the css now the extremely basic javascript to make the click work.
function showDrop(){
if(document.getElementById('dropDown').style.display == "block"){
document.getElementById('dropDown').style.display = "none";
}else {
document.getElementById('dropDown').style.display = "block";
}
}
Put that in your script tags in the head. As you notice the function name is showDrop which is called in the markup when you click the anchor tag above where the dropdown resides. So basically we are checking if the dropdown menu is being displayed make it dissapear. If it's not being displayed make it appear. That is pretty much it! Thanks for reading and I hope that helps anyone having issues with dropdown menus.
