Skip to main content
M
maria24681357
Participant
July 9, 2017
Answered

Dropdown menu

  • July 9, 2017
  • 3 replies
  • 2023 views

[Moderator moved from Adobe Creative Cloud to Dreamweaver support forum​.]

How do i create a dropdown menu from a normal navigation menu? I have already made the normal navigation menu but i dont know how to add a dropdown menu to it.

Here is my html code:

<div class="row">

<div class="column">

<img class="logo" src="logo.png" alt="Pro Crystal Cleaning Logo">

<nav class="navigation-menu">

<ul>

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

<li><a href="#">About Us</a></li>

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

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

<li><a href="#">Contact Us</a></li>

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

</ul>

</nav>

</div>

</div>

Here is my css code:

.navigation-menu {

background-color: white;

}

.navigation-menu a {

text-align: center;

}

.navigation-menu ul {

list-style-type: none;

}

.navigation-menu ul li a {

text-decoration: none;

color: #383333;

text-align: center;

margin-left: auto;

margin-right: 31px;

display: block;

text-transform: normal;

padding: 10px;

}

This topic has been closed for replies.
Correct answer osgood_

maria24681357  wrote

Could you please do the css for the class .drop-nav?

Not sure you will be able to understand the code but here you go:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Drop Menu</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

</head>

<body>

<style>

body {

font-family: arial, helvetica, sans-serif;

font-size: 14px;

margin: 0;

}

.main-navigation-wrapper {

background-color: #BBB65B;

}

.main-navigation {

margin: 0;

padding: 0;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

font-size: 18px;

line-height: 28px;

}

.main-navigation li {

margin: 0;

padding: 0;

list-style: none;

position: relative;

}

.main-navigation li i {

font-size: 20px;

margin: 0 0 0 5px;

padding: 0;

}

.main-navigation a {

text-decoration: none;

color: #fff;

display: block;

padding: 15px 20px;

}

.main-navigation a:hover {

background-color: #000;

}

/* drop menu */

.main-navigation .drop-menu {

position: absolute;

top: 3.2em;

left: 0;

background-color: #BBB65B;

margin: 0;

padding: 0;

width: 200px;

}

.drop-menu a {

padding: 10px 20px;

color: #000;

}

.drop-menu a:hover {

color: #fff;

}

/* end drop menu */

.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: 15px 40px;

font-size: 20px;

}

.main-navigation li {

width: 100%;

}

/* drop menu */

.main-navigation .drop-menu {

position: static;

}

/* end drop menu */

</style>

<script>

$(document).ready(function(){

//hide drop menu

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

//show drop menu

$('.main-navigation li').css('cursor', 'pointer').click(function() {

$(this).find('ul').slideToggle().end().siblings().find('ul').hide();

});

//drop menu slide up if window width more than 960px

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

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

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

}

});

// show mobile menu icon at 960px window width

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

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

});

//realign main-navifation and hide drop menu at 960px window width

$(window).resize(function(){

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

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

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

}

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

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

}

});

});

</script>

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

<div class="mobile-menu-icon"><i class="fa fa-bars"></i></div>

<ul class="main-navigation">

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

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

<li><a href="#">Services<i class="fa fa-angle-down" aria-hidden="true"></i></a>

<ul class="drop-menu">

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

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

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

<li><a href="#">Link 4</a></li>

</ul>

<!-- end drop=menu -->

</li>

<li><a href="#">Quotes<i class="fa fa-angle-down" aria-hidden="true"></i></a>

<ul class="drop-menu">

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

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

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

<li><a href="#">Link 4</a></li>

</ul>

<!-- end drop=menu -->

</li>

<li><a href="#">Contact Us</a></li>

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

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

</nav>

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

</body>

</html>

3 replies

O
osgood_
Legend
July 9, 2017

You're only giving us a basic vertical navigation. If that is correct and you want a sub-nav to slide down then an example using your code is below: Click on 'Services' or 'Quotes'

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Slide Down Naviagtion</title>

<style>

.navigation-menu {

background-color: white;

}

.navigation-menu a {

text-align: center;

}

.navigation-menu ul {

list-style-type: none;

margin: 0;

padding: 0;

}

.navigation-menu ul li a {

text-decoration: none;

color: #383333;

text-align: center;

margin-left: auto;

margin-right: 31px;

display: block;

text-transform: normal;

padding: 10px;

}

</style>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

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

$('.navigation-menu li').click(function() {

$(this).find('ul').slideToggle().end().siblings().find('ul').hide();

});

});

</script>

</head>

<body>

<div class="row">

<div class="column">

<img class="logo" src="logo.png" alt="Pro Crystal Cleaning Logo">

<nav class="navigation-menu">

<ul>

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

<li><a href="#">About Us</a></li>

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

<!-- Start Drop Nav -->

<ul class="drop-nav">

<li><a href="#">Sub Link 1</a></li>

<li><a href="#">Sub Link 2</a></li>

<li><a href="#">Sub Link 3</a></li>

<li><a href="#">Sub Link 4</a></li>

</ul>

<!-- end Drop Nav -->

</li>

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

<!-- Start Drop Nav -->

<ul class="drop-nav">

<li><a href="#">Sub Link 1</a></li>

<li><a href="#">Sub Link 2</a></li>

<li><a href="#">Sub Link 3</a></li>

<li><a href="#">Sub Link 4</a></li>

</ul>

<!-- end Drop Nav -->

</li>

<li><a href="#">Contact Us</a></li>

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

</ul>

</nav>

</div>

</div>

</body>

</html>

    M
    maria24681357Author
    Participant
    July 10, 2017

    i have tried doing this and it doesnt display it in a dropdown. It just displays the words underneath other headings.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    July 9, 2017

    It depends on what you want exactly.

    If you use DW 2017 & Bootstrap for your responsive layout, you can make dropdown Tabs or Pills  very easily from the Insert menu.  See screenshot.

    If you're looking for a responsive Top Navbar that collapses on smaller devices, this is the basic code for that.

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest compiled and minified Bootstrap CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

    <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>

    </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

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

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    <div class="container">

    <div class="row">

    PAGE CONTENT GOES HERE.....

    </div>

    </div>

    <!--latest jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

    </script>

    <!--Bootstrap-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
      M
      maria24681357Author
      Participant
      July 10, 2017

      If you could, could you please write it in a html and css code. I tried using the Dreamweaver bootstrap nav dropdown but it didnt really work. i would like to do it myself in html but i am a bit confused with your codes.

      John T Smith
      Community Expert
      John T SmithCommunity Expert
      Community Expert
      July 9, 2017

      This is not the best place for that kind of technical help, please provide the name of the program you are using so your message may be moved to the correct program forum... A program would be Dreamweaver or Muse or ???

      Firefly Community Gallery
      Adobe Firefly

      Remix with Firefly Community Gallery

      Thousands of free creations to fall in love with and remix in Firefly.

      Explore now
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices