Member Avatar for Gl753

Can a navbar created in PhotoShop be converted to a drop down list via CSS / JavaScript
in DreamWeaver?

  • 3 Contributors
  • 2 Replies
  • 430 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Yes — a navbar designed in Photoshop can be made into a working dropdown, but the PSD itself is only a static image. The practical approach is to rebuild the nav as semantic HTML, use CSS for layout and basic dropdown behavior, and add a small amount of JavaScript for touch or advanced accessibility. Export only decorative assets (icons, background slices) from the PSD; keep text and links as HTML so the menu stays accessible and searchable.

Typical workflow

  • Export icons/SVGs and 1x/2x raster assets from Photoshop.
  • Create semantic markup: nav > ul > li with nested ul for submenus.
  • Style with CSS (positioned absolute submenus, show on :hover and :focus-within).
  • Add JS to toggle aria-expanded on submenu buttons for keyboard + touch support.
  • Test at multiple widths and with screen readers.

Minimal example (structure and CSS hint):

<nav role="navigation" aria-label="Main">
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li class="has-sub">
      <a href="#">Services</a>
      <ul class="sub">
        <li><a href="#">Design</a></li>
        <li><a href="#">Dev</a></li>
      </ul>
    </li>
  </ul>
</nav>
.nav{list-style:none;margin:0;padding:0;display:flex}
.nav li{position:relative}
.sub{display:none;position:absolute;left:0;top:100%}
.nav li:hover>.sub,.nav li:focus-within>.sub{display:block}

Accessibility and responsive notes

  • Use real links or a button inside li for submenus and manage aria-expanded with JS for keyboard users and touch screens.
  • Avoid rasterizing text; recreate typography with web fonts for crisp rendering and SEO.
  • For mobile, implement a collapsible toggle (hamburger) that reveals the ul or swaps to an accessible off-canvas menu.

Context for this thread

  • asked if conversion is possible — it is, by rebuilding the nav in code.
  • was right that code is required, and asked for code — the small example above shows the basic structure to start from. DreamWeaver can edit the files, but it will not automatically turn a PSD into a functional dropdown.

Recommended Answers

All 2 Replies

Member Avatar for alisajjad160

I think no, You have to customize your navbar directly into dreamweaver with javascript or you can use jquery.

Member Avatar for almostbob

code, not random product names, and some may assist

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.