demo_foundation_header_markup.html

demo_foundation_header_markup.html

  <header>
    <div class="top-bar">
      <div class="top-bar-title">
        <h2>
          <a href="#">
            Logo Here
          </a>
        </h2>
        <span class="mobile-menu-button" data-responsive-toggle="responsive-menu" data-hide-for="large">
          <button class="menu-icon" type="button" data-toggle></button>
        </span>
      </div><!--top-bar-title-->

      <div id="responsive-menu" class="hide-for-large clearfix">
        <div class="top-bar-right">
          <ul class="accordion menu" data-accordion-menu>
            <li class="nav-about"><a href="/about">About Dr. Fujita</a>
            </li>
            <li class="nav-contact has-dropdown">
              <a href="/contact">Contact / Office Hours</a>
              <ul class="menu vertical">
                <li class="nav-contact">
                  <a href="/contact">Physician Office Hours</a>
                </li>
                <li class="nav-location">
                  <a href="/location">Location / Directions</a>
                </li>
                <li class="nav-web-portal">
                  <a href="/web-portal">Patient Web Portal</a>
                </li>
              </ul>
            </li>
            <li><a href="/patient-information">Patient Information</a></li>
            <li><a href="/patient-resources">Patient Resources</a></li>
          </ul>
        </div>
      </div><!--#responsive-menu-->

      <div id="desktop-menu" class="show-for-large clearfix">
        <div class="top-bar-right">
          <ul class="dropdown menu" data-dropdown-menu>
            <li class="nav-about"><a href="/about">About Dr. Fujita</a>
            </li>
            <li class="nav-contact">
              <a href="/contact">Contact / Office Hours</a>
              <ul class="menu">
                <li class="nav-contact">
                  <a href="/contact">Physician Office Hours</a>
                </li>
                <li class="nav-location">
                  <a href="/location">Location / Directions</a>
                </li>
                <li class="nav-web-portal">
                  <a href="/web-portal">Patient Web Portal</a>
                </li>
              </ul>
            </li>
            <li><a href="/patient-information">Patient Information</a></li>
            <li><a href="/patient-resources">Patient Resources</a></li>
          </ul>
        </div>
      </div><!--#desktop-menu-->

    </div><!--top-bar-->
  </header>