Real CSS Stylized Navigation Menus

psd2css Online already has a number of menu features. But many people prefer CSS stylized text menus over the primarily graphical ones that psd2css Online does already. That's why we've added the first of a set of features to make creating CSS Stylized menus a breeze. Just create a layer in your Photoshop or GIMP web design, draw a box where you want the menu to appear, and name the layer with the _vlist1 Layer Naming Convention. That's it. Convert the PSD file at psd2css Online and see a vertical menu coded into the spot on your page you designated. In the HTML it's nothing but an unordered list:

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

You just change the href and whatever you want the link to say and your menu works. If you want to change the colors, or background colors, or any of that you can edit those in the CSS portion for that layer. As usual you can use the comments in the generated code to find the parts you want to edit.

The first Layer Naming Convention we're doing for this is _vlist1. 'v' for vertical and 1 means it's the first we've built for you. Soon we'll add more vertical and horizontal list styles and just number them. So (not yet, but soon) we'll have _vlist2, _vlist3, etc. and _hlist1, _hlist2, etc. They will all generated CSS styles for menu type lists.

Here is a video tutorial to show you how easy it is:

The generated page from the tutorial is available here: http://psd2cssonline.com/tutorials/vlist1/index.html
and the PSD file used is here: http://psd2cssonline.com/tutorials/vlist1/vlist1.psd