ESTE BLOG É MELHOR VISUALIZADO NO INTERNET EXPLORER. MUITO MAIS RÁPIDO !!! Templates e Acessorios Templates & Acessórios: Menu deslizante
NÃO É PERMITIDO COPIAR OS TEMPLATES E OS ACESSÓRIOS PARA REDISTRIBUIR EM OUTROS SITES OU BLOGS. NÃO RETIRE OS CRÉDITOS PARA NÃO TER PROBLEMAS.
Google
www.flickr.com
templates.acessorios fotos Mais fotos detemplates.acessorios

Menu deslizante

english mobile

Pegue o código, faça as modificações e cole no HTML/Javascript no seu blogger



Clique-me

Clique para ampliar










Pegar código



    <style>


    #menuShow{
    border: 1px solid #666666;
    background-color: #eef7f8;
    padding: 13px;
    font-size: 13px;
    font-family: Verdana, Arial;
    position: absolute;
    width: auto;
    height: auto;
    }


    #menuSelect{
    border: 1px solid #666666;
    background-color: #eef7f8;
    padding: 13px;
    font-size: 13px;
    font-family: Verdana, Arial;
    position: absolute;
    width: auto;
    height: auto;
    }


    </style>



    <!-- STEP TWO: Copy this code into the BODY of your HTML document -->



    <!--
    Place the two <div>'s below in the <body> of your code.
    (Normally, this will be immediately after the <body>
    tag.) The menuShow div will contain your links; change
    the text, links, and targets as needed.
    //-->


    <div id="menuSelect">
    <a href="#" onclick="moveOnMenu();moveOffSelector()">
    <img border="0" width="28" src="http://img352.imageshack.us/img352/7780/5arrowaxmk5.gif" height="28"/></a>
    </div>
    <div id="menuShow">
    <a href="#" onclick="moveOffMenu();moveOnSelector()">
    <img border="0" width="28" src="http://img352.imageshack.us/img352/7780/5arrowaxmk5.gif" height="28"/></a>
    <br/>
    <br/>


    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item A</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item B</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item C</a><br/>
    <br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item D</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item E</a><br/>
    <br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item F</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item G</a><br/>
    <a href="AQUI O ENDEREÇO DO SEU LINK">Menu Item H</a><br/>


    </div>


    <!--
    Put the following script immediately *after* the
    <div>'s (above) in your page. Set the variables as
    indicated in the script.
    //-->


    <script language="JavaScript">
    <!-- Original: David Sosnowski (support@codelifter.com) -->
    <!-- Web Site: http://www.codelifter.com/ -->


    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com/ -->


    <!-- Begin
    // (C) 2001 http://www.codelifter.com/
    // http://www.codelifter.com/
    // Free for all users, but leave in this header.


    // Set Show to "yes" to show the menu on start-up.
    // Set Show to "no" to show the selector on start-up.


    Show ="yes";


    // Set OffX in pixels to a negative number
    // somewhat larger than the width of the menu.


    var OffX = -150;


    // Set the PosX and PosY variables
    // to the location on the screen where the
    // menu should position (in pixels) when stopped.


    var PosX = 250;
    var PosY = 100;


    // Usually, use the settings shown; but you can
    // change the speed and the increment of motion
    // across the screen, below.


    var speed = 1;
    var increment = 1;
    var incrementNS4 = 5; // for slower NS4 browsers


    // do not edit below this line
    // ===========================


    var is_NS = navigator.appName=="Netscape";
    var is_Ver = parseInt(navigator.appVersion);
    var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
    var is_NS5up = is_NS&&is_Ver>=5;


    var MenuX = OffX;
    var SelX = PosX;
    var sPosX = PosX;
    var sOffX = OffX;


    if (Show == "yes") {
    sPosX = OffX;
    sOffX = PosX;
    MenuX = sOffX;
    SelX = sPosX;
    }


    if (is_NS4) {
    increment = incrementNS4;
    Lq = "document.layers.";
    Sq = "";
    eval(Lq+'menuSelect'+Sq+'.left=sPosX');
    eval(Lq+'menuShow'+Sq+'.left=sOffX');
    eval(Lq+'menuSelect'+Sq+'.top=PosY');
    eval(Lq+'menuShow'+Sq+'.top=PosY');
    } else {
    Lq = "document.all.";
    Sq = ".style";
    document.getElementById('menuSelect').style.left = sPosX+"px";
    document.getElementById('menuShow').style.left = sOffX+"px";
    document.getElementById('menuSelect').style.top = PosY+"px";
    document.getElementById('menuShow').style.top = PosY+"px";
    }


    function moveOnMenu() {
    if (MenuX < PosX) {
    MenuX = MenuX + increment;
    if (is_NS5up) {
    document.getElementById('menuShow').style.left = MenuX+"px";
    } else {
    eval(Lq+'menuShow'+Sq+'.left=MenuX');
    }
    setTimeout('moveOnMenu()',speed);
    }
    }


    function moveOffMenu() {
    if (MenuX > OffX) {
    MenuX = MenuX - increment;
    if (is_NS5up) {
    document.getElementById('menuShow').style.left = MenuX+"px";
    } else {
    eval(Lq+'menuShow'+Sq+'.left=MenuX');
    }
    setTimeout('moveOffMenu()',speed);
    }
    }


    function moveOffSelector() {
    if (SelX > OffX) {
    SelX = SelX - increment;
    if (is_NS5up) {
    document.getElementById('menuSelect').style.left = SelX+"px";
    } else {
    eval(Lq+'menuSelect'+Sq+'.left=SelX');
    }
    setTimeout('moveOffSelector()',speed);
    }
    }


    function moveOnSelector() {
    if (SelX < PosX) {
    SelX = SelX + increment;
    if (is_NS5up) {
    document.getElementById('menuSelect').style.left = SelX+"px";
    } else {
    eval(Lq+'menuSelect'+Sq+'.left=SelX');
    }
    setTimeout('moveOnSelector()',speed);
    }
    }
    // End -->
    </script>




    <!-- Script Size: 5.71 KB -->







    Créditos: Code Lifter

0 comentários: