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

Dreamweaver creating a menu bar

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

O
osgood_
Legend
December 6, 2018

HI SOGOOD

Just have a few problems with the code for the Sat Nav and wondered if you can alter it, please? as i cant work it out sadly :-(

1) On the menu strip. It loads Menu 2 and Sub 1 / 2 / 3. ( but the Menu 2 bar is the same colour as all the other non selected section.

But when you click on menu 3 or 2 , it looks like this. ( Menu bar panel is coloured)

Any way to alter this?

----

2). I created a few links below it which will go to other pages in the site. But when you click on the menu bar, you get boxes  appearing around the Twitter icon and hyperlink text?

is there away to stop this just on the other links but not to effect the main menu bar?

Many thanks

Tim


1) Add the line of code in bold below to the script code:

<script>

$(document).ready(function(){

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

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

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

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

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

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

});

});

</script>

Add the class in bold below to the Menu 2 <li> tag:

<li class="active-top-menu"><a href="#">Menu 2</a></li>

Add the css selector below to your css styles

.main-nav .active-top-menu a {

background-color: pink;

color: #000!important;

}

2). I would need to see the code. It looks like you have somehow added the link and twitter icon to the main-nav so they will get the anchor tag (links) styling  from the main-nav css.

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