2

estoy creando un menu desplegable y no me lo muestra, no se por que, miren aqui el codigo: 

Default.ctp

<?php
/**
 * CakePHP(tm) : Rapid Development Framework (https://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (https://cakefoundation.org)
 * @link          https://cakephp.org CakePHP(tm) Project
 * @package       app.View.Layouts
 * @since         CakePHP(tm) v 0.10.0.1076
 * @license       https://opensource.org/licenses/mit-license.php MIT License
 */
$cakeDescription = __d('cake_dev', 'Seadog Creative Labs');
$cakeVersion = __d('cake_dev', 'CakePHP %s', Configure::version());
?>
<!DOCTYPE html>
<!--<html oncontextmenu="return false"> -->
<html>
    <head>
        <?php echo $this->Html->charset(); ?>
        <title>
            <?php echo $cakeDescription ?>:
            <?php echo $this->fetch('title'); ?>
        </title>
        <?php
        echo $this->Html->meta('icon', '/favicon.ico', ['type' => 'image/ico']);
        echo $this->Html->meta(['name' => 'robots', 'content' => 'noindex']);
        echo $this->Html->meta(['name' => 'googlebot', 'content' => 'noindex']);
        echo $this->Html->meta(['http-equiv' => 'Pragma', 'content' => 'no-cache']);



        echo $this->Html->css('navigatePage');
        echo $this->Html->css('myStyle');
        echo $this->Html->css('bootstrap.min'); //problema
        echo $this->Html->css('bootstrap-datepicker3'); //problema
//        echo $this->Html->css('reset.min');
//        echo $this->Html->css('bootstrap-formhelpers.min');

        echo $this->Html->css('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css');
        echo $this->Html->css('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css');

//        echo $this->Html->css('jquery.timepicker.min');

        echo $this->Js->writeBuffer();

        echo $this->fetch('css');
        echo $this->fetch('script');
        ?>
    </head>
    <body>
        <div id="container">

            <div id="header">
                hola

                <div class="dropdown">
                    <button class="btn dropdown-toggle sr-only" type="button"
                            id="dropdownMenu1" data-toggle="dropdown">
                        Menú desplegable
                        <span class="caret"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">Acción</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">Otra acción</a>
                        </li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">Otra acción más</a>
                        </li>
                        <li role="presentation" class="divider"></li>
                        <li role="presentation">
                            <a role="menuitem" tabindex="-1" href="#">Acción separada</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="content">


                <?php
                $here = $this->request->here(true);
                if (strpos($here, "?") !== false) {
                    $hola = explode('?', $here);
                    $hola[1] = str_replace('=', '', $hola[1]);
                    if (strpos($hola[1], 'publicidad') !== false) {
                        echo "publicidad";
                    } else if (strpos($hola[1], 'marca') !== false) {
                        echo "Marca";
                    } else if (strpos($hola[1], 'experiencia') !== false) {
                        echo "Experiencia de usuario";
                    }
                } else {
                    echo "";
                }
                ?>
                <?php echo $this->Flash->render(); ?>
                <?php echo $this->fetch('content'); ?>
                <div class="scroll-pointer hidden-sm hidden-xs">
                    <ul class="nav navbar-nav">
                        <li>
                            <?= $this->Html->link('<span>Home</span>', '#', ['escape' => false, 'class' => 'scrollable ']);
                            ?>
                        </li>
                        <li>
                            <?= $this->Html->link('<span>Menu1</span>', '#Necesidades', ['escape' => false, 'class' => 'scrollable ']);
                            ?>
                        </li>

                        <li>
                            <?= $this->Html->link('<span>Menu2</span>', '#Estrategias', ['escape' => false, 'class' => 'scrollable ']);
                            ?>
                        </li> 
                        <li>
                            <?= $this->Html->link('<span>Menu3</span>', '#Herramientas', ['escape' => false, 'class' => 'scrollable ']);
                            ?>
                        </li> 
                        <li>
                            <?= $this->Html->link('<span>Menu4</span>', '#Ejecucion', ['escape' => false, 'class' => 'scrollable ']);
                            ?>
                        </li> 
                        <li>
                            <?= $this->Html->link('<span>Menu5</span>', '#Resultados', ['escape' => false, 'class' => 'scrollable ']);
                            ?>
                        </li> 
                    </ul>
                </div>


                <?php // echo $this->Html->script('jquery.timepicker.min'); ?>
                <?php echo $this->Html->script('jquery-3.3.1'); ?>
                <?php echo $this->Html->script('bootstrap.min'); ?>
                <?php // echo $this->Html->script('bootstrap-datepicker.min'); ?>
                <?php echo $this->Html->script('myScript'); ?>
                <?php // echo $this->Html->script('jquery.easing.min'); ?>
                <?php //echo $this->Html->script('bootstrap-formhelpers.min'); ?>

                <?php echo $this->Html->script('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js'); ?>
                <?php echo $this->Html->script('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js'); ?>



            </div>

            <div id="footer">
                <div class="form-inline row">
                    <select class="selectpicker" data-width="fit">
                        <option  data-content='<span class="flag-icon flag-icon-co" value="es"></span> Español'>Español</option>
                        <option data-content='<span class="flag-icon flag-icon-us" value="en"></span> English'>English</option>
                    </select>

                    <div class="form-group col-xs-6 col-sm-3 col-md-3">
                        <br/>
                        <?php // echo $this->Html->link($cakeDescription, '#');    ?>
                        <ul id="menu" class="navlist">
                            <li class="contenedor">
                                Social network:
                            </li>
                            <li onclick="window.open('https://www.facebook.com/seadoglabs', '_blank');" class="contenedor">
                                <img src="https://www.google.com/s2/favicons?domain=https://facebook.com" title="Facebook" class="imagen"/>
                            </li>
                            <li onclick="window.open('https://www.instagram.com/seadoglabs', '_blank');" class="contenedor">
                                <img src="https://www.google.com/s2/favicons?domain=https://instagram.com" title="Instagram" class="imagen"/>
                            </li>
                            <li onclick="window.open('https://www.linkedin.com/company/seadog-creative-labs', '_blank');" class="contenedor">
                                <img src="https://www.google.com/s2/favicons?domain=https://linkedin.com" title="Linkedin" class="imagen"/>
                            </li>
                        </ul>
                    </div>
                    <div class="form-group col-xs-6 col-sm-3 col-md-3">
                        <br/>
                        <a  class="tip">
                            <label>
                                Designed by
                            </label>
                            <span class="by">
                                Leader:
                                Brand:
                                Communication:
                                Development:
                            </span>
                        </a>
                    </div>
                    <div class="form-group col-xs-6 col-sm-3 col-md-3">

                    </div>
                </div>
            </div>
        </div>
        <?php echo $this->element('sql_dump'); //muestra consultas sql ?>
    </body>
</html>

No se porque no muestra nada

Eso es lo que se ve en el header

1 respuesta 1

5

La clase .sr-only de Bootstrap "oculta" el elemento a la vista del navegador, pero la deja visible para tecnologías asistivas (screen readers). Es por eso que tu dropdown no se ve, quita la clase .sr-only y se mostrará tu menú

<!-- Sin la clase "sr-only" -->
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Menú desplegable
  <span class="caret"></span>
</button>
2
  • Te ganaste el chulito, gracias. Por curiosidad, que son tecnologías asistivas? Commented el 9 abr. 2018 a las 21:40
  • @AndrésVélez, la web está pensada para que sea vista por la mayor cantidad de gente posible, esto incluye a personas que tengan capacidades diferentes por ejemplo. Las tecnologías asistivas ayudan a estas personas a acceder al contenido de una página web, un ejemplo; algún programa que te lea el contenido de la página en voz alta para personas que no puedan ver.
    – user22721
    Commented el 9 abr. 2018 a las 21:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.