Itt egy úgynevezett Responsive menü.

Vagyis ha pc-ről vagyunk az oldalon ,akkor egy sima 100% széles menünk van a lap tetején,de ha mobilról vagyunk az oldalon,akkor egy kisebb,nyitható-zárható menünk van.

Demo

Töltsd le a lentebb található rar-t.

Megtalálod benne a css,js és background fájlt is.Az index.html fájl-t megnyitod egy notepad-al,vagy böngészővel és jobb klikk/Oldalforrása -val megnézheted a teljes váz kódot.Itt a menü egy div-ben van ,ami css-el van pozicionálva(".mainWrap").

A menüt külön ki lehet emelni.

Html kód(Csak a menü váz):

<div class="mainWrap">
 

 
 <!-- Itt kezdődik a menü kódja -->
 <a id="touch-menu" class="mobile-menu" href="#"><i class="icon-reorder"></i>Menu</a>
     
    <nav>
    <ul class="menu">
   <li><a href="#"><i class="icon-home"></i>Főoldal</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   </ul>
   </li>
  <li><a  href="#"><i class="icon-user"></i>Rólunk</a></li>
  <li><a  href="#"><i class="icon-camera"></i>Portfólió</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Level 3 Menu</a>
    <ul>
    <li><a href="#">Sub-Menu 4</a></li>
       <li><a href="#">Sub-Menu 5</a></li>
    <li><a href="#">Sub-Menu 6</a></li>
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="icon-bullhorn"></i>Blog</a></li>
  <li><a  href="#"><i class="icon-envelope-alt"></i>Kapcsolat</a></li>
  </ul>
  </nav>
 <!-- Itt végződik a menü kódja -->

      
 
 
 </div>

Teljes dokumentáció és fájlok: Letöltés