Drop down menu (vertical)

[Kevin E.]

I needed to add a dropdown navigation menu to a website. I used a code that I found that I believe came from Nancy O and it worked well. However, I would like for it to be a vertical dropdown instead of horizontal. Do you know what I would change in the code? The site and code is below. Thanks.

http://new.adtsrc.org​

CSS Code:

/* BEGIN HORIZONTAL DROP-MENU */

#navbar{
position:relative;
width: 100%;
margin: 0 0 0 45px; /**adjust as needed**/
padding:0;
text-align:center;
}

#navbar li {
list-style: none;
font-size: 12px;
float: left;
text-align:center;
}

/**top level menu**/

#navbar li a, #navbar li a:visited {
display: block;
text-decoration: none;
margin-right: 12px; /* space between links */
color: #FFF;
width: 9em; /* adjust as needed or use auto */
padding: 8px;
font-weight:bold;
line-height: 1.50em;
background: #C33;/* for older browsers */
/**CSS gradients for various browsers**/
background: -moz-linear-gradient(#C33, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #C33));
background: -webkit-linear-gradient(#C33, #111);
background: -o-linear-gradient(#C33, #111);
background: -ms-linear-gradient(#C33, #111);
background: linear-gradient(#C33, #111);
/* gradient filters for IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C33333', endColorstr='#111111',GradientType=0 );
}

/**top menu style on mouse over**/

#navbar li:hover > a {
color: #FFF;
}

/**sub-menu**/

#navbar li ul {
display: none;
text-align:center;
margin:0;
padding:0 1em;
}

#navbar li:hover ul,
#navbar li.hover ul {
display: block;
position: absolute;
padding: 0;
}

#navbar li:hover li,
#navbar li.hover li {
float: left;}

/**drop-menu style**/

#navbar li:hover li a, #navbar li.hover li a {
color: #0D207D;
width: auto; /* adjust width as needed or use auto */
background: none;
filter:none:
}

/**drop-menu style on mouse over**/

#navbar li li a:hover {
color: #990000;
text-decoration:underline;
}

/* Clear floated elements at the end*/

#navbar:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

/**END HORIZONTAL DROP-MENUS STYLES**/

[an error occurred while processing this directive]

HTML Code:

<ul id="navbar">
<li><a href="#">ABOUT US &#9660;</a><ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Newsletter</a></li></ul>
</li>
<li><a href="#">PRODUCTS &#9660;</a><ul>
<li><a href="#">Broken Glass</a></li>
<li><a href="#">Mosaic Tiles</a></li>
<li><a href="#">Adhesives</a></li>
<li><a href="#">Grout</a></li></ul>
</li>
<li><a href="#">ACCESSORIES &#9660;</a><ul>
<li><a href="#">Gloves</a></li>
<li><a href="#">Rubber Mallets</a></li>
<li><a href="#">Sponges</a></li>
<li><a href="#">Safety Glasses</a></li></ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul> <!--end navbar-->

[Nancy OShea]

Fix your HTML & CSS errors first.  Then we can discuss layout issues.

Showing results for http://new.adtsrc.org/ - Nu Html Checker

W3C CSS Validator results for http://new.adtsrc.org/ (CSS level 3)

Nancy

[Kevin E.]

Done...except I can't figure out what the parse error is for 129

[Nancy OShea]

Look at your code.  What's missing?

.container .left_article {

padding-left: 5%;

padding-right: 1%;

text-align: justify;

line-height: 24px;

margin-top: 30px;

margin-bottom: 15px;

color: #B3B3B3;

margin-left:

}

HINT:  there's no value.

Nancy

[Kevin E.]

I see. It is deleted.

[Nancy OShea]

Did you upload the revised HTML and CSS yet?  It looks the same to me.

A responsive web site needs a responsive menu.

Which begs the question, why not use Bootstrap for this project?

[Kevin E.]

It's up now.

Frankly, I don't do websites very often...this is more of a favor for a client that I do mostly print and other marketing with. Since I don't do sites very often, it is almost like learning site development each time I do one. In this case, I hadn't used my Dreamweaver CC yet (my last site was CS4 or 5) so I am getting a lot of pleasant and not-so-pleasant surprises.

Regarding bootstrap...I had never heard of it until I started looking through the menus and came across it. I tried using it to add drop down down menu buttons, but when I went to change the color of the buttons, it would not let me save the bootstrap file under the same name. I saved it under a different name, but then couldn't figure out how to connect it to the html page, even perusing my new copy of Dreamweaver CC for Dummies! 🙂

[osgood_ · Accepted solution]

How efficient are you at copying and pasting? Below is your complete navigation menu using jQuery/css - its mobile friendly as well. You should be able to copy the html and replace it where you current navigation code is. Copy the css and paste it at the end of your css file and copy the block of jQuery <script></script> and paste it in your page directly before the closing </head> tag. Obviously the jQuery needs to be included on each page that the menu is on so it's best to make a .js file and link to it.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Drop Menu</title>

<style>

.main-navigation-wrapper {

background-color: #BBB65B;

}

.main-navigation {

margin: 0;

padding: 25px 40px;

display: flex;

flex-wrap: wrap;

justify-content: center;

font-size: 20px;

line-height: 30px;

}

.main-navigation li {

margin: 0;

padding: 0;

list-style: none;

position: relative;

text-align: center;

width: 16.66%;

}

.main-navigation a {

text-decoration: none;

color: #fff;

display: block;

text-align: center;

}

.main-navigation .drop-menu {

position: absolute;

top: 3em;

left: 0;

background-color: #BBB65B;

margin: 0;

padding: 0 0 10px 0;

width: 100%;

}

.main-navigation .drop-menu li {

width: 100%;

font-size: 19px;

line-height: 29px;

}

.main-navigation .drop-menu a {

padding: 10px 15px;

}

.mobile-menu-icon {

display: none;

}

@media screen and (max-width: 960px) {

.main-navigation {

display: none;

}

.mobile-menu-icon {

display: block;

text-align: right;

color: #fff;

padding: 25px 40px;

font-size: 20px;

}

.main-navigation li {

width: 100%;

padding: 10px 0;

}

.main-navigation .drop-menu {

position: static;

}

.main-navigation .drop-menu li {

padding: 0;

}

</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

//hide drop menu

$('.drop-menu').hide();

//show drop menu

$('.main-navigation a').click(function(){

$('.drop-menu').slideUp();                                    

$(this).next('.drop-menu').slideToggle();

});

//hide drop menu on mouse leave

$('.drop-menu').mouseleave(function(){

$('.drop-menu').slideUp();                                    

});

// show mobile menu icon at 960px window width

$('.mobile-menu-icon').css('cursor','pointer').click(function(){

$('.main-navigation').slideToggle();

});

//realign main-naviagtion at 960px window width

$(window).resize(function(){

if ($(window).width() > 960) {

$('.main-navigation').css('display', 'flex');

}

else if ($(window).width() < 960) {

$('.main-navigation').css('display', 'none');

}

});

});

</script>

</head>

<body>

<nav class="main-navigation-wrapper">

<div class="mobile-menu-icon">MENU</div>

<ul class="main-navigation">

<li><a href="#">WHO WE ARE<br /> &#9660;</a>

<ul class="drop-menu">

<li><a href="#">ADTSRC Board</a></li>

<li><a href="#">ADTSRC Staff</a></li>

</ul>

</li>

<li><a href="#">WHAT WE DO<br /> &#9660;</a>

<ul class="drop-menu">

<li><a href="#">Subject 1</a></li>

<li><a href="#">Subject 2</a></li>

<li><a href="#">Subject 3</a></li>

<li><a href="#">Subject 4</a></li></ul>

</li>

<li><a href="#">HOW TO HELP<br /> &#9660;</a>

<ul class="drop-menu">

<li><a href="#">Financial Suport</a></li>

<li><a href="#">Volunteer</a></li>

<li><a href="#">Community Partnerships</a></li>

</ul>

</li>

<li><a href="#">NEWS AND EVENTS</a></li>

<li><a href="#">CAREERS</a></li>

<li><a href="#">CONTACT US</a></li>

</ul> <!--end main-navigation-->

</nav>

<!-- end main-navigation-wrapper -->

</body>

</html>

[Kevin E.]

I'm sorry...maybe I am just sleepy this morning, but I am having a hard time figuring out what is the css, html and jQuery. I thought the beginning was the html, but then it has a style tag. Can you add a line or something to separate the three pieces of code? Thank you.

[osgood_]

CSS:

.main-navigation-wrapper {

background-color: #BBB65B;

}

.main-navigation {

margin: 0;

padding: 25px 40px;

display: flex;

flex-wrap: wrap;

justify-content: center;

font-size: 20px;

line-height: 30px;

}

.main-navigation li {

margin: 0;

padding: 0;

list-style: none;

position: relative;

text-align: center;

width: 16.66%;

}

.main-navigation a {

text-decoration: none;

color: #fff;

display: block;

text-align: center;

}

.main-navigation .drop-menu {

position: absolute;

top: 3em;

left: 0;

background-color: #BBB65B;

margin: 0;

padding: 0 0 10px 0;

width: 100%;

}

.main-navigation .drop-menu li {

width: 100%;

font-size: 19px;

line-height: 29px;

}

.main-navigation .drop-menu a {

padding: 10px 15px;

}

.mobile-menu-icon {

display: none;

}

@media screen and (max-width: 960px) {

.main-navigation {

display: none;

}

.mobile-menu-icon {

display: block;

text-align: right;

color: #fff;

padding: 25px 40px;

font-size: 20px;

}

.main-navigation li {

width: 100%;

padding: 10px 0;

}

.main-navigation .drop-menu {

position: static;

}

.main-navigation .drop-menu li {

padding: 0;

}

[osgood_]

jQuery:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){

//hide drop menu

$('.drop-menu').hide();

//show drop menu

$('.main-navigation a').click(function(){

$('.drop-menu').slideUp();                                    

$(this).next('.drop-menu').slideToggle();

});

//hide drop menu on mouse leave

$('.drop-menu').mouseleave(function(){

$('.drop-menu').slideUp();                                    

});

// show mobile menu icon at 960px window width

$('.mobile-menu-icon').css('cursor','pointer').click(function(){

$('.main-navigation').slideToggle();

});

//realign main-naviagtion at 960px window width

$(window).resize(function(){

if ($(window).width() > 960) {

$('.main-navigation').css('display', 'flex');

}

else if ($(window).width() < 960) {

$('.main-navigation').css('display', 'none');

}

});

});

</script>

[osgood_]

html:

<nav class="main-navigation-wrapper">

<div class="mobile-menu-icon">MENU</div>

<ul class="main-navigation">

<li><a href="#">WHO WE ARE<br /> &#9660;</a>

<ul class="drop-menu">

<li><a href="#">ADTSRC Board</a></li>

<li><a href="#">ADTSRC Staff</a></li>

</ul>

</li>

<li><a href="#">WHAT WE DO<br /> &#9660;</a>

<ul class="drop-menu">

<li><a href="#">Subject 1</a></li>

<li><a href="#">Subject 2</a></li>

<li><a href="#">Subject 3</a></li>

<li><a href="#">Subject 4</a></li></ul>

</li>

<li><a href="#">HOW TO HELP<br /> &#9660;</a>

<ul class="drop-menu">

<li><a href="#">Financial Suport</a></li>

<li><a href="#">Volunteer</a></li>

<li><a href="#">Community Partnerships</a></li>

</ul>

</li>

<li><a href="#">NEWS AND EVENTS</a></li>

<li><a href="#">CAREERS</a></li>

<li><a href="#">CONTACT US</a></li>

</ul> <!--end main-navigation-->

</nav>

<!-- end main-navigation-wrapper -->

[Kevin E.]

It worked like a charm! Thank you!

[osgood_]

It worked like a charm! Thank you!

Ok, great it worked out, thanks for the feedback.