Home / Questions / 154393
Accepted
Andrés Vélez
Asked: 2020-04-10 13:07:39 +0800 CST 2020-04-10 13:07:39 +0800 CST

Menu with boostrap

  • 772

I'm creating a dropdown menu and it doesn't show me, I don't 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 don't know why it doesn't show anything

That is what you see in the header

javascript

1 Answers

  1. Best Answer

    The .sr-onlyBootstrap class "hides" the element from the browser's view, but leaves it visible to assistive technologies (screen readers). That's why your dropdown is not seen, remove the class .sr-onlyand your menu will be shown

    <!-- Sin la clase "sr-only" -->
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  Menú desplegable
  <span class="caret"></span>
</button>
    • 5