Adding drop down to a menu bar

User Generated

jneera_pylqr

Programming

Description

Hello

I got this nav bar I made in HTML5 and CSS. http://cssdeck.com/labs/yavhvjxz

I want to add this dropdown to the nav bar http://cssdeck.com/labs/soothing-css3-dropdown-animation without making any changes to the nav bar, I only need  to add the dropdown to the menu bar. Nothing else.

Thanks

User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

<!-- <div id="topbar" class="fadeInOnLoad">
<div class="inner-topbar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Upload</a></li>
</ul>

</div> <!-- inner-topbar -->
</div> <!-- topbar -->
->
<nav>
<ul>
<li class="drop">
<a href="#">Home</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Home menu 1</li>
<li>Home menu 2</li>
</ul>
</div>
</div>
</li>

<li class="drop">
<a href="#">About</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>About 1</li>
<li>About 2</li>
</ul>
</div>
</div>
</li>

<li class="drop">
<a href="#">Contact</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Contact 1</li>
<li>Contact 2</li>
</ul>
</div>
</div>
</li>

<li class="drop">
<a href="#">Upload</a>

<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Upload 1</li>
<li>Upload 2</li>
</ul>
</div>
</div>
</li>


</ul>
</nav>



------------------- CSS ----------------------

#topbar {
padding: 34px 1px;
width: 100%;
background-color: #FAFAFA;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
background-image: -webkit-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: -moz-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: -o-linear-gradient(top, #FAFAFA, #F5F5F5);
background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
border-bottom: 1px solid #EBEBEB;
}

.inner-topbar {
margin: -5px auto;
clear: both;
display: block;
position: relative;
}

#topbar ul {
background: #fff
}

#topbar ul li {
float: left;
list-style: none;
margin-right: 10px;
}

#topbar ul .floatRight {
float: right;
margin-right: 0px;
margin-left: 10px;
background: transparent;
}

#topbar ul .highlight, #topbar ul .highlight a {
background: transparent;
}

#topbar ul li a {
padding: 10px 19px;
padding-top: 0px;
border-bottom: 0px;
display: block;
color: #000;
text-decoration: none;

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

#topbar ul li a:hover {
border-bottom: 5px solid #39C;
margin-bottom: 0px;
}

#topbar ul li.current {
padding: 0px 19px;
display: block;
color: #39C;
text-decoration: none;
margin-bottom: 0px;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}


/*---------- BODY --------------------------------*/

body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}

a {
text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
width: 100%;
height: 80px;
background: #222;
}

ul {
text-align: center;
}

ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height: 80px;
padding: 0 20px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}

.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px; /* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
box-shadow: 0 1px 6px rgba(0,0,0,.15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}

.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}

.dropOut ul li:hover {
background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }


------------- Script -------------

// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// set the scene size
var WIDTH = 900,
HEIGHT = 600;

// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.Camera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();

// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;

// start the renderer - set the clear colour
// to a full black
renderer.setClearColor(new THREE.Color(0, 1));
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
$container.append(renderer.domElement);

// create the particle variables
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.png"
),
blending: THREE.AdditiveBlending,
transparent: true
});

// now create the individual particles
for(var p = 0; p < particleCount; p++) {

// create a particle with random
// position values, -250 -> 250
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
// create a velocity vector
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y
0); // z

// add it to the geometry
particles.vertices.push(particle);
}

// create the particle system
var particleSystem = new THREE.ParticleSystem(
particles,
pMaterial);

particleSystem.sortParticles = true;

// add it to the scene
scene.addChild(particleSystem);

// animation loop
function update() {

// add some rotation to the system
particleSystem.rotation.y += 0.01;

var pCount = particleCount;
while(pCount--) {
// get the particle
var particle = particles.vertices[pCount];

// check if we need to reset
if(particle.position.y < -200) {
particle.position.y = 200;
particle.velocity.y = 0;
}

// update the velocity
particle.velocity.y -= Math.random() * .1;

// and the position
particle.position.addSelf(
particle.velocity);
}

// flag to the particle system that we've
// changed its vertices. This is the
// dirty little secret.
particleSystem.geometry.__dirtyVertices = true;

renderer.render(scene, camera);

// set up the next call
requestAnimFrame(update);
}
requestAnimFrame(update);


Anonymous
Goes above and beyond expectations!

Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4

Related Tags