Vertical Navigation Bar?

[alexisr4815162342]

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?

[Nancy OShea · Accepted solution]

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;

}

[osgood_]

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

[alexisr4815162342]

Thank you so much!