Menu with boostrap

2

I'm creating a drop-down menu and it does not show me, I do not know why, look here the code:

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>

I do not know why it does not show anything

    
asked by Andrés Vélez 09.04.2018 в 23:07
source

1 answer

4

The class .sr-only of Bootstrap "hides" the element in view of the browser, but leaves it visible for assistive technologies (screen readers). That's why your dropdown can not be seen, remove the class .sr-only and your menu will be displayed

<!-- Sin la clase "sr-only" -->
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Menú desplegable
  <span class="caret"></span>
</button>
    
answered by 09.04.2018 / 23:30
source