simplicidade em prática .

Plugin jQuery NavMenu v 0.1

Autor - Fábio Godinho

EXEMPLO




CODIGO

código javascript/jQuery


	
		$('#navMenu').navMenu();

código HTML 

			  
<ul id="navMenu">
  <li><a href="#">Menu 1</a>
    <ul>
        <li>submenu </li>
        <li>submenu</li>
        <li><a href="#">submenu</a></li>
        <li><a href="#">submenu</a></li>
        <li><a href="#">submenu</a>
            <ul>
                  <li>submenu item </li>
                <li>submenu item
                    <ul> 
                        <li>submenu item
                            <ul>
                                  <li>submenu item </li>
                                <li>submenu item </li>
                                  <li>submenu item </li>
                                <li>submenu item</li>
                                <li>submenu item</li>                                  
                              </ul>                                                
                        </li>
                        <li>submenu item </li>   
                    </ul>                                        
                </li>
                <li>submenu item</li>
            </ul>                
        </li>
        <li><a href="#">submenu</a></li>
        <li><a href="#">submenu</a></li>
        <li><a href="#">submenu</a></li>                
        <li>submenu
            <ul>
                  <li>submenu item </li>
                <li>submenu item</li>
                <li>submenu item</li>
            </ul>
        </li>
    </ul>
  </li>                         
  <li><a href="#">Menu 2</a>
      <ul>
          <li>submenu </li>
           <li>submenu</li>
        <li>submenu
            <ul>
                  <li>submenu item </li>
                <li>submenu item </li>
                  <li>submenu item </li>
                <li>submenu item</li>
                <li>submenu item</li>                                  
              </ul>  
        </li>                                  
        <li>submenu</li>
        <li>submenu</li>                              
    </ul>
  </li>
  <li><a href="#">Menu 3</a> </li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a> </li>
  <li><a href="#">Menu 6</a></li>
  <li><a href="#">Menu 7</a></li>         
</ul>

Outras Propriedades - Configurações para mudança deste layout padrão 

	 		
<script type="text/javascript">

 $(document).ready(function(){
 	
	$('#navMenu').navMenu({                   // ------ abaixo são os valores padrões do Plugin, equivalente à: $('#menu').navMenu();  ------------ //
		layout          : 'menu-layout',      // css do layout padrão do menu
		styleDefault    : 'menu-default',     // estilo css quando o mouse não está em cima do MENU
		styleHover      : 'menu-hover',       // estilo css quando o mouse passa sobre o MENU
		styleDefaultSub : 'submenu-default',  // estilo css quando o mouse não esta sobre o SUBMENU
		styleHoverSub   : 'submenu-hover'     // estilo css quando o mouse passa sobre o SUBMENU						  
	});
	
 });
 
</script>



<style>
  /* você pode alterar os estilos, ou indicar outros no Plugin */
  .menu-default{ ... }  
  .menu-hover{ ...  }  
  .submenu-default{ ...  }
  .submenu-hover{ ...  }
  
</style>

Download


OBS:
* jquery.navMenu.js têm 2k
* jquery.navMenu.css têm 2k .

Pacote:
* jquery.navMenu v 0.1 - Download com o exemplo


GNU General Public License - Distribuição Livre.