Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Dudas con Menu
#1
Buenas a todos! les comento cual es mi inquietud.
Me mandaron a hacer una nueva página para anexar a mi pagina principal y me pidieron un menú vertical a la izquierda. Luego de encontrar uno que me gusto decidí probarlo y todo iba bien... hasta que me trabe.
Si esta sería la página en cuestión, que esta subida, pero no esta linkeada a ningun lado: http://www.aaa-clinica.com.ar/indexcon.html
Los botones para ocultar o desplegar el menu a la derecha, arriba y abajo estan deshabilitados y solo funciona el de la izquierda. 
El problema es este: el boton de "Left Push" lo tengo que mover y los demas tienen que desaparecer... pero al intentar simplemente borrar las lineas que contienen a los otros 3 botones, el boton que a mi me interesa deja de funcionar.
Me di cuenta que pasa exactamente lo mismo si yo borro 1, 2 o los 3, y también ocurre si yo reemplazo las lineas con otros datos, o incluso el mismo botón "Left Push"... queda deshabilitado.
Alguno tiene alguna idea de por que puede estar pasando esto?
Les adjunto los codigos:
-Página propiamente dicha:

Código:
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Blueprint: Slide and Push Menus</title>
        <meta name="description" content="Blueprint: Slide and Push Menus" />
        <meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/default.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <script src="js/modernizr.custom.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/social-icons.css" type="text/css" media="screen"><!--[if IE 8]> <link rel="stylesheet" type="text/css" media="screen" href="css/ie8-hacks.css" /> <![endif]--><!-- ENDS CSS --><!-- GOOGLE FONTS <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>--><!-- JS -->

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/custom.js"></script><!-- Isotope -->
<script src="js/jquery.isotope.min.js"></script><!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--><!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG.js"></script> <script> /* EXAMPLE */ //DD_belatedPNG.fix('*'); </script> <![endif]--><!-- ENDS JS --><!-- Nivo slider -->
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen">
<script src="js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script><!-- ENDS Nivo slider --><!-- tabs -->
<link rel="stylesheet" href="css/tabs.css" type="text/css" media="screen">
<script type="text/javascript" src="js/tabs.js"></script><!-- ENDS tabs --><!-- prettyPhoto -->
<script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen"><!-- ENDS prettyPhoto --><!-- superfish -->

<link rel="stylesheet" media="screen" href="css/superfish.css">
<link rel="stylesheet" media="screen" href="css/superfish-left.css">
<script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script>
<script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script><!-- ENDS superfish --><!-- poshytip -->
<link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css">
<link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css">
<script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script><!-- ENDS poshytip --><!-- Tweet -->
<link rel="stylesheet" href="css/jquery.tweet.css" media="all" type="text/css">
<script src="js/tweet/jquery.tweet.js" type="text/javascript"></script><!-- ENDS Tweet --><!-- Fancybox -->
<link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    </head>
    <div id="header"><!-- wrapper-header -->
<div class="wrapper"> </div>
<!-- ENDS wrapper-header --> </div>
<!-- ENDS HEADER -->
    <body class="cbp-spmenu-push">
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <a href="#">Home</a>
            <a href="#">Welcome Message</a>
            <a href="#">Daily Programe Schedule</a>
            <a href="#">Preliminary Academic Program</a>
            <a href="#">Abstract Submission</a>
            <a href="#">Download Abstract Submission Form</a>
            <a href="#">Registration</a>
            <a href="#">Hotels</a>
            <a href="#">Exhibitor's Marketing Opportunities</a>
            <a href="#">Tourism in Buenos Aires and Argentine</a>
            <a href="#">FAQ's</a>
        </nav>
        <div class="container">
            <header class="clearfix">
                <span>Asociación Argentina de Anatomía Clínica</span>
                <h1>Congreso blablabla</h1>
            </header>
            <div class="main">
                <section>
                    <h2>Slide Menus</h2>
                    <!-- Class "cbp-spmenu-open" gets applied to menu -->
                    <button id="showLeft">Show/Hide Left Slide Menu</button>
                    <button id="showRight">Show/Hide Right Slide Menu</button>
                    <button id="showTop">Show/Hide Top Slide Menu</button>
                    <button id="showBottom">Show/Hide Bottom Slide Menu</button>
                   <button id="showLeftPush">Show/Hide Left Push Menu</button>                
                </section>
                
            </div>
        </div>
        <div id="bottom"><!-- wrapper-bottom -->
<div class="wrapper">
<div id="bottom-text">Asociación Argentina de Anatomía Clínica 2014. Webmaster (Gantcheff Guillermo)</div>
<!-- Social -->
<ul class="social ">
                        <li><a href="https://www.facebook.com/AsocArgAnatoClinica" class="poshytip  facebook" title="Síguenos en Facebook"></a></li>
                        <li><a href="http://www.twitter.com/aaaclinica" class="poshytip twitter" title="Síguenos en Twitter"></a></li>
                        
                        <li><a href="http://ar.linkedin.com/#" class="poshytip linkedin" title="Enlace Linkedin"></a></li>
                        <li><a href="http://www.youtube.com/#" class="poshytip youtube" title="Mira nuestros videos"></a></li>
                    </ul>
<!-- ENDS Social -->
<div id="to-top" class="poshytip" title="Ir arriba"></div>
</div>
<!-- ENDS wrapper-bottom --> </div>
<!-- ENDS Bottom -->
        <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
        <script src="js/classie.js"></script>
        <script>
            var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                menuRight = document.getElementById( 'cbp-spmenu-s2' ),
                menuTop = document.getElementById( 'cbp-spmenu-s3' ),
                menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
                showLeft = document.getElementById( 'showLeft' ),
                showRight = document.getElementById( 'showRight' ),
                showTop = document.getElementById( 'showTop' ),
                showBottom = document.getElementById( 'showBottom' ),
                showLeftPush = document.getElementById( 'showLeftPush' ),
                showRightPush = document.getElementById( 'showRightPush' ),
                body = document.body;

            showLeft.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuLeft, 'cbp-spmenu-open' );
                disableOther( 'showLeft' );
            };
            showRight.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuRight, 'cbp-spmenu-open' );
                disableOther( 'showRight' );
            };
            showTop.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuTop, 'cbp-spmenu-open' );
                disableOther( 'showTop' );
            };
            showBottom.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( menuBottom, 'cbp-spmenu-open' );
                disableOther( 'showBottom' );
            };
            showLeftPush.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( body, 'cbp-spmenu-push-toright' );
                classie.toggle( menuLeft, 'cbp-spmenu-open' );
            };
            showRightPush.onclick = function() {
                classie.toggle( this, 'active' );
                classie.toggle( body, 'cbp-spmenu-push-toleft' );
                classie.toggle( menuRight, 'cbp-spmenu-open' );
                disableOther( 'showRightPush' );
            };

            function disableOther( button ) {
                if( button !== 'showLeft' ) {
                    classie.toggle( showLeft, 'disabled' );
                }
                if( button !== 'showRight' ) {
                    classie.toggle( showRight, 'disabled' );
                }
                if( button !== 'showTop' ) {
                    classie.toggle( showTop, 'disabled' );
                }
                if( button !== 'showBottom' ) {
                    classie.toggle( showBottom, 'disabled' );
                }
                if( button !== 'showLeftPush' ) {
                    classie.toggle( showLeftPush, 'disabled' );
                }
                if( button !== 'showRightPush' ) {
                    classie.toggle( showRightPush, 'disabled' );
                }
            }
        </script>
    </body>
</html>
CSS correspondientes:
1: component.css
Código:
/* General styles for all menus */
.cbp-spmenu {
    background: #47a3da;
    position: fixed;
}

.cbp-spmenu h3 {
    color: #afdefa;
    font-size: 1.9em;
    padding: 20px;
    margin: 0;
    font-weight: 300;
    background: #0d77b6;
}

.cbp-spmenu a {
    display: block;
    color: #fff;
    font-size: 1.1em;
    font-weight: 300;
}

.cbp-spmenu a:hover {
    background: #258ecd;
}

.cbp-spmenu a:active {
    background: #afdefa;
    color: #47a3da;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
    width: 240px;
    height: 100%;
    top: 0;
    z-index: 1000;
}

.cbp-spmenu-vertical a {
    border-bottom: 1px solid #258ecd;
    padding: 1em;
}

.cbp-spmenu-horizontal {
    width: 100%;
    height: 150px;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
    height: 100%;
    width: 20%;
    float: left;
}

.cbp-spmenu-horizontal a {
    float: left;
    width: 20%;
    padding: 0.8em;
    border-left: 1px solid #258ecd;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
    left: -240px;
}

.cbp-spmenu-right {
    right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
    left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
    right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
    top: -150px;
}

.cbp-spmenu-bottom {
    bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
    top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
    bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.cbp-spmenu-push-toright {
    left: 240px;
}

.cbp-spmenu-push-toleft {
    left: -240px;
}

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

    .cbp-spmenu-horizontal {
        font-size: 75%;
        height: 110px;
    }

    .cbp-spmenu-top {
        top: -110px;
    }

    .cbp-spmenu-bottom {
        bottom: -110px;
    }

}

@media screen and (max-height: 26.375em){

    .cbp-spmenu-vertical {
        font-size: 90%;
        width: 190px;
    }

    .cbp-spmenu-left,
    .cbp-spmenu-push-toleft {
        left: -190px;
    }

    .cbp-spmenu-right {
        right: -190px;
    }

    .cbp-spmenu-push-toright {
        left: 190px;
    }
}

y el 2: default.css
Código:
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome.eot');
    src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
        url('../fonts/fontawesome.svg#fontawesome') format('svg'),
        url('../fonts/fontawesome.woff') format('woff'),
        url('../fonts/fontawesome.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html { font-size: 100%;     padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
   font-family: 'Lato', Calibri, Arial, sans-serif;
   color: #47a3da;

}

a {
    color: #f0f0f0;
    text-decoration: none;
}

a:hover {
    color: #000;
}

.main,
.container > header {
    width: 90%;
    max-width: 69em;
    margin: 0 auto;
    padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
    padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
    font-size: 2.125em;
    line-height: 1.3;
    margin: 0;
    float: left;
    font-weight: 400;
}

.container > header span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.6em 0.1em;
}

.container > header nav {
    float: right;
}

.container > header nav a {
    display: block;
    float: left;
    position: relative;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    color: transparent;
    margin: 0 0.1em;
    border: 4px solid #47a3da;
    text-indent: -8000px;
}

.container > header nav a:after {
    content: attr(data-info);
    color: #47a3da;
    position: absolute;
    width: 600%;
    top: 120%;
    text-align: right;
    right: 0;
    opacity: 0;
    pointer-events: none;
}

.container > header nav a:hover:after {
    opacity: 1;
}

.container > header nav a:hover {
    background: #47a3da;
}

.main > section {
    max-width: 260px;
    width: 90%;
    margin: 0 auto;
}

.main > section h2 {
    font-weight: 300;
    color: #ccc;
}

.main > section button {
    border: none;
    background: #47a3da;
    color: #fff;
    padding: 1.5em;
    display: block;
    width: 100%;
    cursor: pointer;
    margin: 10px 0;
    font-size: 0.8em;
}

.main > section button:hover {
    background: #258ecd;
}

.main > section button.active {
    background: #0d77b6;
}

.main > section button.disabled {
    background: #aaa;
    pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
    font-family: 'fontawesome';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 2;
    text-align: center;
    color: #47a3da;
    -webkit-font-smoothing: antialiased;
    text-indent: 8000px;
    padding-left: 8px;
}

.container > header nav a:hover:before {
    color: #fff;
}

.icon-drop:before {
    content: "\e000";
}

.icon-arrow-left:before {
    content: "\f060";
}

Desde ya muchisimas gracias a todos por el apoyo de siempre
#2
Creo que ya encontré tu error

En el body:
Código:
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <a href="#">Home</a>
            <a href="#">Welcome Message</a>
            <a href="#">Daily Programe Schedule</a>
            <a href="#">Preliminary Academic Program</a>
            <a href="#">Abstract Submission</a>
            <a href="#">Download Abstract Submission Form</a>
            <a href="#">Registration</a>
            <a href="#">Hotels</a>
            <a href="#">Exhibitor's Marketing Opportunities</a>
            <a href="#">Tourism in Buenos Aires and Argentine</a>
            <a href="#">FAQ's</a>
</nav>

En script "js/classie.js" :
Código:
        <script>
            var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                menuRight = document.getElementById( 'cbp-spmenu-s2' ),
                menuTop = document.getElementById( 'cbp-spmenu-s3' ),
                menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
                showLeft = document.getElementById( 'showLeft' ),
                showRight = document.getElementById( 'showRight' ),
                showTop = document.getElementById( 'showTop' ),
                showBottom = document.getElementById( 'showBottom' ),
                showLeftPush = document.getElementById( 'showLeftPush' ),
                showRightPush = document.getElementById( 'showRightPush' ),
                body = document.body;


¿Los ves? solo tienes un id. Necesitas crear más capas una para cada class e ID, o modificar el scrip (todos comoc cbp-spmenu-s1) si quieres usar el mismo menú para todo y no tener contenido duplicado.
Crear tipo de nodo. Agregar campos CCK. Crear Vista. Enjuague. Y repita.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Java | 4 operaciones basicas con menu de opciones warez 3 3,728 02-02-2015, 11:13 AM
Último mensaje: YamaT
  Como hacer un menu horizontal con html5 y css3 torgar22 4 1,025 16-12-2014, 02:07 PM
Último mensaje: Demozz
  Menú horizontal con buscador expandible imgur 2 562 04-12-2014, 09:08 PM
Último mensaje: imgur
  Simple Shadow menu Pure Css by Spastox Spastox 0 435 20-04-2014, 09:01 PM
Último mensaje: Spastox
  Menu CSS + HTML gamesd 6 825 16-04-2014, 03:56 PM
Último mensaje: rubenpl
  [Aporte]Crea Un Menú en Html con Css Parte2 gordillo_22 3 562 09-04-2014, 05:20 PM
Último mensaje: darklion93
Bombilla El menu de youtube para tu foro! Jona 11 1,524 18-01-2014, 07:07 PM
Último mensaje: JsAlexM
  Crear menú flotante cachencho29 7 993 03-01-2014, 08:10 PM
Último mensaje: KeviNxDTM
  Crea Un Menú en Html con Css gordillo_22 2 536 01-01-2014, 07:00 AM
Último mensaje: Minikole
  Menu HTML5 - CSS3 gamesd 8 1,069 27-10-2013, 02:20 PM
Último mensaje: ilopezbdn



Usuarios navegando en este tema: 1 invitado(s)