Highlighted

Vertical Navigation Bar?

Community Beginner ,
Mar 19, 2019

Copy link to clipboard

Copied

I am a beginner to Dreamweaver and am looking to know how to design and create a vertical navigation bar. I have only ever done horizontal menus and I want to change it up a bit. What steps would I take?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

CSS Navigation Bar

Start with a new HTML document and an unordered list of links.

<nav>

<ul>

<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>

</nav>

Style your navigation lists with CSS by adding this to your stylesheet.

nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 200px;

  background-color: #f1f1f1;

}

nav li a {

  display: block;

  color: #000;

  padding: 8px 16px;

  text-decoration: none;

}

/* Change the link color on hover, tap & click */

nav li a:hover,

nav li a:focus,

nav li a:active{

  background-color: #555;

  color: white;

}

TOPICS
Create menus in Dreamweaver

Views

913

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 Navigation Bar?

Community Beginner ,
Mar 19, 2019

Copy link to clipboard

Copied

I am a beginner to Dreamweaver and am looking to know how to design and create a vertical navigation bar. I have only ever done horizontal menus and I want to change it up a bit. What steps would I take?

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

CSS Navigation Bar

Start with a new HTML document and an unordered list of links.

<nav>

<ul>

<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>

</nav>

Style your navigation lists with CSS by adding this to your stylesheet.

nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 200px;

  background-color: #f1f1f1;

}

nav li a {

  display: block;

  color: #000;

  padding: 8px 16px;

  text-decoration: none;

}

/* Change the link color on hover, tap & click */

nav li a:hover,

nav li a:focus,

nav li a:active{

  background-color: #555;

  color: white;

}

TOPICS
Create menus in Dreamweaver

Views

914

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
Mar 19, 2019 0
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

CSS Navigation Bar

Start with a new HTML document and an unordered list of links.

<nav>

<ul>

<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>

</nav>

Style your navigation lists with CSS by adding this to your stylesheet.

nav ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  width: 200px;

  background-color: #f1f1f1;

}

nav li a {

  display: block;

  color: #000;

  padding: 8px 16px;

  text-decoration: none;

}

/* Change the link color on hover, tap & click */

nav li a:hover,

nav li a:focus,

nav li a:active{

  background-color: #555;

  color: white;

}

Nancy O'Shea, ACP
Alt-Web.com

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...
Mar 19, 2019 2
LEGEND ,
Mar 20, 2019

Copy link to clipboard

Copied

alexisr4815162342  wrote

I am a beginner to Dreamweaver and am looking to know how to design and create a vertical navigation bar. I have only ever done horizontal menus and I want to change it up a bit. What steps would I take?

A link to a responsive vertical navigation tutorial was posted in this forum just a few days ago, which might be appropriate for what you are looking for.

Responsive Animated Sidebar Menu From Scratch with HTML & CSS - YouTube

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...
Mar 20, 2019 2
Community Beginner ,
Mar 29, 2019

Copy link to clipboard

Copied

Thank you so much!

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...
Mar 29, 2019 0