Adding drop down to a menu bar

Anonymous
timer Asked: Aug 6th, 2013
account_balance_wallet $5

Question 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

Tutor Answer

codershelp
School: UCLA

<!-- <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);

flag Report DMCA
Review

Anonymous
Thank you! Reasonably priced given the quality not just of the tutors but the moderators too. They were helpful and accommodating given my needs.

Similar Questions
Hot Questions
Related Tags
Study Guides

Brown University





1271 Tutors

California Institute of Technology




2131 Tutors

Carnegie Mellon University




982 Tutors

Columbia University





1256 Tutors

Dartmouth University





2113 Tutors

Emory University





2279 Tutors

Harvard University





599 Tutors

Massachusetts Institute of Technology



2319 Tutors

New York University





1645 Tutors

Notre Dam University





1911 Tutors

Oklahoma University





2122 Tutors

Pennsylvania State University





932 Tutors

Princeton University





1211 Tutors

Stanford University





983 Tutors

University of California





1282 Tutors

Oxford University





123 Tutors

Yale University





2325 Tutors