Skip to main content
T
tim cross
Inspiring
October 14, 2018
Answered

Dreamweaver creating a menu bar

  • October 14, 2018
  • 2 replies
  • 2578 views

I want to create a Menu bar which is not standard on bootstrap ( Well I can't find it and not sure what to do) I wonder if anyone could give me any advice of how I could go about creating it please?.

Menu 2 is open and all the other menu are closed. In Menu 2 there are 3 sub menu to choose from.

So when you click on Menu 3 it goes to a new page etc etc

Im sure its simple!

Hope you can help

Many Thanks

Tim

(Im using the latest version of dreamweaver cc)

This topic has been closed for replies.
Correct answer osgood_

Just change to <li></li> tags.....

<nav class="main-nav">

<ul>

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

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

<li class="sub-menu">

<ul>

<li class="sub-1"><a href="#">Sub 1</a></li>

<li class="sub-2"><a href="#">Sub 2</a></li>

<li class="sub-3"><a href="#">Sub 3</a></li>

</ul>

</li>

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

<li class="sub-menu">

<ul>

<li class="sub-1"><a href="#">Sub 1</a></li>

<li class="sub-2"><a href="#">Sub 2</a></li>

<li class="sub-3"><a href="#">Sub 3</a></li>

</ul>

</li>

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

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

</ul>

</nav>

2 replies

O
osgood_
Legend
October 14, 2018

I'm also not sure what it is you are trying to achieve but the below code works more or less as your diagram shows. If this is what you require I'm not sure what you plan to do with it for mobile devices.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Horizontal Menu</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>

$(document).ready(function(){

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

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

$(this).next('.sub-menu').show();

$('a').css({ 'background-color' : 'red','color': '#fff' });

$(this).find('a').css({ 'background-color' : 'pink','color': '#000' });

});

});

</script>

<style>

* {

box-sizing: border-box;

}

body {

font-family: helvetica, sans-serif;

font-size: 16px;

}

.main-nav {

margin: 0;

padding: 0;

}

.main-nav ul {

display: flex;

justify-content: center;

align-items: center;

margin: 0;

padding: 0;

background-color: red;

}

.main-nav ul li {

list-style: none;

margin: 0;

padding: 0;

border-left: 1px solid #fff;

}

.main-nav ul li:last-child {

border-right: 1px solid #fff;

}

.main-nav ul li a {

display: block;

color: #fff;

text-decoration: none;

padding: 8px 15px 8px 15px;

}

.sub-menu {

display: none;

}

.sub-1 a, .sub-2 a, .sub-3 a {

background-color: pink!important;

color: red!important;

display: none;

}

</style>

</head>

<body>

<nav class="main-nav">

<ul>

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

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

<div class="sub-menu">

<ul>

<li class="sub-1"><a href="#">Sub 1</a></li>

<li class="sub-2"><a href="#">Sub 2</a></li>

<li class="sub-3"><a href="#">Sub 3</a></li>

</ul>

</div>

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

<div class="sub-menu">

<ul>

<li class="sub-1"><a href="#">Sub 1</a></li>

<li class="sub-2"><a href="#">Sub 2</a></li>

<li class="sub-3"><a href="#">Sub 3</a></li>

</ul>

</div>

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

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

</ul>

</nav>

<!-- end main-nav -->

</body>

</html>

B i r n o u
B i r n o u
Legend
October 14, 2018

your code is nice an tricky, but I don't think that UL tag allows nested DIV

ul – unordered list - HTML5

a wokaround on the felx approcach could be applied, don't you think.

O
osgood_Correct answer
Legend
October 14, 2018

Just change to <li></li> tags.....

<nav class="main-nav">

<ul>

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

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

<li class="sub-menu">

<ul>

<li class="sub-1"><a href="#">Sub 1</a></li>

<li class="sub-2"><a href="#">Sub 2</a></li>

<li class="sub-3"><a href="#">Sub 3</a></li>

</ul>

</li>

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

<li class="sub-menu">

<ul>

<li class="sub-1"><a href="#">Sub 1</a></li>

<li class="sub-2"><a href="#">Sub 2</a></li>

<li class="sub-3"><a href="#">Sub 3</a></li>

</ul>

</li>

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

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

</ul>

</nav>

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
October 14, 2018

I am not sure what what it is that you are trying to do. When I create a standard navbar it comes complete with an example of a dropdown menu. If this is not what you want, please explain.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices