Highlighted

Vertical menu and a Horizontal menu tag conflict

Participant ,
Oct 31, 2020

Copy link to clipboard

Copied

I would like to have both a Vertical menu and a Horizontal menu on the same page.

The two have a similiar layout with ui and li etc.

Question: How to have them not conflict?

Example below. Do you add a name like ul.menu

Not sure how to ask the question  : )

 

Horizontal Navigation Bar

ul {
list-style-type: none;
}

li a {
display: block;
}

li {
float: left;
}

li a:hover {
background-color: #111;
}

-------------------------------------

 

Vertical Navigation Bar

ul {
list-style-type: none;
}

li a {
display: block;
}

li {
text-align: center;
}

li:last-child {
border-bottom: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}

 

========================================

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Menu</a></li>
<li><a href="#contact">Menu</a></li>
<li><a href="#about">Menu</a></li>
</ul>

 

Views

53

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Vertical menu and a Horizontal menu tag conflict

Participant ,
Oct 31, 2020

Copy link to clipboard

Copied

I would like to have both a Vertical menu and a Horizontal menu on the same page.

The two have a similiar layout with ui and li etc.

Question: How to have them not conflict?

Example below. Do you add a name like ul.menu

Not sure how to ask the question  : )

 

Horizontal Navigation Bar

ul {
list-style-type: none;
}

li a {
display: block;
}

li {
float: left;
}

li a:hover {
background-color: #111;
}

-------------------------------------

 

Vertical Navigation Bar

ul {
list-style-type: none;
}

li a {
display: block;
}

li {
text-align: center;
}

li:last-child {
border-bottom: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
}

 

========================================

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">Menu</a></li>
<li><a href="#contact">Menu</a></li>
<li><a href="#about">Menu</a></li>
</ul>

 

Views

54

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 31, 2020 0
Participant ,
Nov 01, 2020

Copy link to clipboard

Copied

I think I found the answer.
 As an example I could add a class then a name in front of the tag as seen below.

So I could say .horizontal ul or .vertical ul etc. Any name to tell them apart.

 

.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.menu li {
	float: left;
	position: relative;
}
.menu a {
	display: block;
	font-size: 100%;
	width: 130px;
	color: #000;
	text-decoration: none;
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 50px;
	background-color: #D1D1D1;
}
.menu :visited {
}
.menu :hover {
	color: #FFF;
	background: #D14B34;
}
.menu ul ul {
	visibility: hidden;
	position: absolute;
	width: 130px;
	height: 0;
}
.menu ul li:hover ul, .menu ul a:hover ul {
	visibility: visible;
}

-----------------------------------------------------

<div class="menu">
<ul>
<li><a href="#">Dropdown</a></a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></a>
<ul>
<li><a href="#" title="Dropdown">Dropdown</a></li>
<li><a href="#" title="Menu">Menu</a></li>
<li><a href="#" title="Dropdown">Dropdown</a></li>
<li><a href="#" title="Menu">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></a>
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
</div>

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2020 1
Adobe Community Professional ,
Nov 01, 2020

Copy link to clipboard

Copied

Or use a unique ID.

 

CSS
=====
#vert ul {list-style-type: none;}
#vert li {text-align: center;}
#vert li:last-child {border-bottom: none;}
#vert li a {display: block;}
#vert li a.hover, #vert li a.active, #vert li a.focus {
    background-color: #4CAF50;
    color: #FFF;
}

HTML
=====
<ul id="vert>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2020 1
Adobe Community Professional ,
Nov 01, 2020

Copy link to clipboard

Copied

@davidhelp

Do test your navigation on actual touch screen devices.  I mention this because without a mouse, HOVER doesn't do anything.  The prevailing wisdom in responsive web design is to keep navigation simple and mobile-friendly.

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2020 0
Participant ,
Nov 01, 2020

Copy link to clipboard

Copied

Thanks.

I tried googling this but did not know how to state the question. I mostly got how to create menus of one or the other but not both.

Also this will help when creating lists that use the same <li> <ul>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2020 0
Adobe Community Professional ,
Nov 01, 2020

Copy link to clipboard

Copied

Responsive Hamburger Menu.  Everything must work on click/tap with an average adult finger tip.

https://codepen.io/mutedblues/pen/MmPNPG

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2020 0
Participant ,
Nov 01, 2020

Copy link to clipboard

Copied

Thanks again. I like that menu as when you make the screen smaller you see a 3 line button that when clicked on you see the menu items.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2020 0