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

Dreamweaver creating a menu bar

  • October 14, 2018
  • 2 replies
  • 2594 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>

T
tim crossAuthor
Inspiring
November 24, 2018

Hi osgood, sorry for the delay in replying to you all. I was on holiday for two weeks and then was snowed down until now! and totally forgot to reply.

Yes that code you attached is what I was trying to achieve! just one question, is there away to start the page with Menu 2 open with sub 1 / 2 /3 instead of at the moment all submenus being closed? thanks Tim

T
tim crossAuthor
Inspiring
December 7, 2018

https://forums.adobe.com/people/tim+cross  wrote

One last question, When you click on the Nav Bar at the bottom in the header which has several hyperlinks they also turn blue? I have looked in Page Properties, and the CSS and I can't see why.

Change the line of code in the script from 'a' (see below)  to '.main-nav li a' as shown in red:

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

<script>

$(document).ready(function(){

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

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

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

$('.main-nav ul li').removeClass('active-top-menu');

$('.main-nav li a').css({ 'background-color' : '#2499FB','color': '#fff' });

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

});

});

</script>


Thank You that is prefect! 

Thank you for all your help much appreciated.

Tim

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