elitebydesign.com

Free Codes

Menus



holas xD aki les traigo otro menu muy bueno =D

aqui el code

fuente : Mi pc xD jaja lo tenia guardado xD
colocar esto por encima de la pagina:

Código:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://codes4web.t35.com/js/blackmenu.js"></script>
<link rel="stylesheet" type="text/css" href="http://codes4web.t35.com/css/blackmenu.css" />



Codigo del menu

Código:
<ul class="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Menu</a>

        <ul class="subnav">
            <li><a href="#">Link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>

        </ul>
    </li>
    <li>
        <a href="#">Menu</a>
        <ul class="subnav">
            <li><a href="#">link</a></li>
       
            <li><a href="#">link</a></li>

           
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>

    <li>
        <a href="#">Menu</a>
        <ul class="subnav">
            <li><a href="#">link</a></li>
       
            <li><a href="#">link</a></li>
           
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>

        </ul>
    </li>
</ul>


Codigo completo

Código:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://codes4web.t35.com/js/blackmenu.js"></script>
<link rel="stylesheet" type="text/css" href="http://codes4web.t35.com/css/blackmenu.css" />

<ul class="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Menu</a>

        <ul class="subnav">
            <li><a href="#">Link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>

        </ul>
    </li>
    <li>
        <a href="#">Menu</a>
        <ul class="subnav">
            <li><a href="#">link</a></li>
       
            <li><a href="#">link</a></li>

           
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>

    <li>
        <a href="#">Menu</a>
        <ul class="subnav">
            <li><a href="#">link</a></li>
       
            <li><a href="#">link</a></li>
           
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>

        </ul>
    </li>
</ul>




otro menu css desplegable adaptado xD x mi abviamente jaja

Fuente: Yo xD

Demo aqui

En el texto por encima de la pagina:

Código:
<link rel="stylesheet" type="text/css" media="print" href="http://www.sohtanaka.com/web-design/examples/toggle/print.css" />
<link rel="stylesheet" type="text/css" href="http://codes4web.t35.com/css/blacknbluemenu.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
    $(".toggle_container").hide();

    $("h2.trigger").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });
   
    $("h2.trigger").click(function(){
        $(this).next(".toggle_container").slideToggle("slow,");
    });

});
</script>


Codigo de menu :

Código:
<div class="container">

    <h2 class="trigger"><a href="#">BlacKNBlue</a></h2>
    <div class="toggle_container">
        <div class="block">

            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p><font size="2"><b>Menu proporcionado por RockM3M0 de <a href="http://codes4web.es.tl" target="_blank">Codes4web</a> <br>
            Entra ahora y encuentra los mejores codes para tu site =D</b></font></p>
        </div>
    </div>
   
    <h2 class="trigger"><a href="#">Titulo del menu</a></h2>

    <div class="toggle_container">
        <div class="block">
            <h3>Titulo del contenido</h3>
            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p>Aqui puedes poner todo tu contenido =D</p>
        </div>

    </div>
   
<h2 class="trigger"><a href="#">Titulo del menu</a></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Titulo del contenido</h3>
            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p>Aqui puedes poner todo tu contenido =D</p>
            </div>
    </div>
   
<h2 class="trigger"><a href="#">Titulo del menu</a></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Titulo del contenido</h3>

            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p>Aqui puedes poner todo tu contenido =D</p></div>
    </div>
   

</div>



Codigo completo

Código:
<link rel="stylesheet" type="text/css" media="print" href="http://www.sohtanaka.com/web-design/examples/toggle/print.css" />
<link rel="stylesheet" type="text/css" href="http://codes4web.t35.com/css/blacknbluemenu.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
    $(".toggle_container").hide();

    $("h2.trigger").toggle(function(){
        $(this).addClass("active");
        }, function () {
        $(this).removeClass("active");
    });
   
    $("h2.trigger").click(function(){
        $(this).next(".toggle_container").slideToggle("slow,");
    });

});
</script>



<div class="container">

    <h2 class="trigger"><a href="#">BlacKNBlue</a></h2>
    <div class="toggle_container">
        <div class="block">

            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p><font size="2"><b>Menu proporcionado por RockM3M0 de <a href="http://codes4web.es.tl" target="_blank">Codes4web</a> <br>
            Entra ahora y encuentra los mejores codes para tu site =D</b></font></p>
        </div>
    </div>
   
    <h2 class="trigger"><a href="#">Titulo del menu</a></h2>

    <div class="toggle_container">
        <div class="block">
            <h3>Titulo del contenido</h3>
            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p>Aqui puedes poner todo tu contenido =D</p>
        </div>

    </div>
   
<h2 class="trigger"><a href="#">Titulo del menu</a></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Titulo del contenido</h3>
            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p>Aqui puedes poner todo tu contenido =D</p>
            </div>
    </div>
   
<h2 class="trigger"><a href="#">Titulo del menu</a></h2>
    <div class="toggle_container">
        <div class="block">
            <h3>Titulo del contenido</h3>

            <img src="http://www.sohtanaka.com/web-design/examples/toggle/thumbnail.gif" width="125" height="125" />
            <p>Aqui puedes poner todo tu contenido =D</p></div>
    </div>
   

</div>



disfrutenlo =D



Hola a todos les traigo un menu desplegable estilo ipod con varios themes que espero les gusten.
Bueno empezemos

1º..

Peguen este codigo en la parte de el texto por encima de la pagina o antes de
Código:
 
    <script type="text/javascript" src="http://codes4web.t35.com/js/jquery-1.3.2.menu.js"></script>
    <script type="text/javascript" src="http://codes4web.t35.com/js/fg.menu.js"></script>
   
    <link type="text/css" href="http://codes4web.t35.com/css/fg.menu.css" media="screen" rel="stylesheet" />
    <link type="text/css" href="http://codes4web.t35.com/css/ui.all.css" media="screen" rel="stylesheet" />
   
    <!-- styles for this example page only -->
    <style type="text/css">
    body { font-size:62.5%; margin:0; padding:0; }
    #menuLog { font-size:1.4em; margin:20px; }
    .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
   
    .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em;
text-decoration:none !important; cursor:pointer; position: relative;
text-align: center; zoom: 1; }
    .fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
    a.fg-button { float:left;  }
    button.fg-button { width:auto; overflow:visible; } /* removes extra button width in IE */
   
    .fg-button-icon-left { padding-left: 2.1em; }
    .fg-button-icon-right { padding-right: 2.1em; }
    .fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
    .fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
    .fg-button-icon-solo { display:block; width:8px; text-indent:
-9999px; }    /* solo icon buttons must have block properties for the
text-indent to work */   
   
    .fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
    </style>
   
    <!-- style exceptions for IE 6 -->
    <!--[if IE 6]>
    <style type="text/css">
        .fg-menu-ipod .fg-menu li { width: 95%; }
        .fg-menu-ipod .ui-widget-content { border:0; }
    </style>
    <![endif]-->   
   
    <script type="text/javascript">   
    $(function(){
        // BUTTONS
        $('.fg-button').hover(
            function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); },
            function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); }
        );
       
        // MENUS       
        $('#flat').menu({
            content: $('#flat').next().html(), // grab content from this page
            showSpeed: 400
        });
       
        $('#hierarchy').menu({
            content: $('#hierarchy').next().html(),
            crumbDefaultText: ' '
        });
       
        $('#hierarchybreadcrumb').menu({
            content: $('#hierarchybreadcrumb').next().html(),
            backLink: false
        });
       
        // or from an external source
        $.get('menuContent.html', function(data){ // grab content from another page
            $('#flyout').menu({ content: data, flyOut: true });
        });
    });
    </script>
   
    <!-- theme switcher button -->
    <script type="text/javascript" src="http://ui.jquery.com/applications/themeroller/themeswitchertool/"></script>
    <script type="text/javascript"> $(function(){ $('<div
style="position: absolute; top: 20px; right: 300px;"
/>').appendTo('body').themeswitcher(); }); </script>


En la parte que dice:
$(function(){ $('style="position: absolute; top: 20px; right: 300px;"
/>').appendTo('body').themeswitcher(); });


Pueden editar la posicion del selector de temas o si lo desean quitarlo.

2º..

Para colocar el menu peguen este codigo donde lo deseen.

Donde # es la pagina a la que iran y link es el nombre de la pagina

Código:
<a tabindex="0" href="#news-items" class="fg-button
fg-button-icon-right ui-widget ui-state-default ui-corner-all"
id="hierarchy"><span class="ui-icon
ui-icon-triangle-1-s"></span>Nombre del menu</a>
<div id="news-items" class="hidden">
<ul>
    <li><a href="#">Menu</a>
        <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
        </ul>
    </li>
    <li><a href="#">menu2</a>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">menu3</a>
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a>
            <ul>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
                <li><a href="#">link</a></li>
            </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
</div>


Pueden ver un demo aqui

Hoy habia 20 visitantes (21 clics a subpáginas) ¡Aqui en esta página!
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis