0

Tengo una barra de navegación que, digamos, en su versión móvil, al pulsar en el botón de [MENÚ] aparece a modo de columna. Existe en la barra una última opción representada a modo de dropdown para desplegar otro submenú.

El UL que conforma el menú tiene un fondo de color de tono oscuro casi negro.

Lo que estoy queriendo lograr es que, en la versión móvil, tras desplegarse el menú principal una vez pulsado el botón de [MENÚ], cuando se despliegue el submenú, igualmente, se expanda la altura del UL y con ello, el fondo oscuro por debajo del submenú desplegado. Y no que quede ese submenú como si estuviera fuera del UL como ocurre ahora.

Aquí pongo el código de los archivos que entran en juego:

index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Barra de Menú :: Fija y Animada</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="css/app.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
</head>
<body>
    <div id="app">

        <div class="barra-responsive">
            <div class="logo">
                <img src="images/logo.png" alt="Logo">
            </div>
            <div class="menu">
                <h4>Menú</h4>
            </div>
        </div>

        <nav>
            <div class="logo">
                <img src="images/logo.png" alt="Logo">
            </div>
            <ul class="animated">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Team</a></li>
                <li><a href="#">Contact</a></li>
                <li class="dropdown">
                    <!-- <a href="#">Cuenta</a> -->
                    <a class="dropdown-toggle" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Tu Cuenta">Cuenta</a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <a class="dropdown-item" href="#" title="Acceder al Perfil">Perfil</a>
                        <a class="dropdown-item" href="#" title="Salir de la sesión">Logout</a>
                    </div>
                </li>
            </ul>
        </nav>
        <section class="sec1"></section>
        <section class="content">
            <h1>Lorem aliquip quis ullamco</h1>
            <p>
                Mollit laborum nisi voluptate mollit ut proident deserunt nulla pariatur mollit occaecat cillum eiusmod eu. Officia commodo duis aliqua veniam consectetur. Laboris esse ex fugiat occaecat anim.
                Consequat minim dolore ipsum cupidatat sunt Lorem anim do incididunt proident sunt aute amet aliquip. Incididunt voluptate sunt voluptate sint irure cillum est est elit veniam tempor mollit enim. Esse eu veniam pariatur ipsum. Amet qui anim ea deserunt est aliqua aliqua occaecat elit veniam ullamco. Mollit id irure aliquip laborum laborum velit culpa deserunt amet ad eu. Ipsum id aliqua mollit voluptate. Labore fugiat exercitation excepteur excepteur occaecat duis consequat.
                <br><br>
                Culpa anim consequat minim occaecat cupidatat in quis esse. Ea mollit est veniam commodo culpa in laborum fugiat cupidatat reprehenderit nulla anim dolore et. Velit occaecat pariatur sit sit deserunt incididunt officia aute labore id sunt culpa. Ea ipsum occaecat aliquip reprehenderit proident nulla dolor esse do consectetur veniam nulla. In commodo excepteur id non cillum. Veniam nostrud do culpa sit cupidatat esse sit veniam sint excepteur Lorem sit.
                Aliqua consectetur veniam excepteur incididunt ad. Qui elit mollit qui dolore ipsum mollit. Anim eiusmod quis voluptate non sint cupidatat. Culpa consequat nostrud sit ipsum laboris irure proident esse. Excepteur mollit sunt labore amet esse nostrud nostrud Lorem commodo deserunt velit duis non. Cillum anim id nisi ex sunt consequat tempor tempor id incididunt sit.
            </p>
        </section>
        <section class="sec2"></section>
        <section class="content">
            <h1>Adipisicing sit ex esse</h1>
            <p>
                Mollit laborum nisi voluptate mollit ut proident deserunt nulla pariatur mollit occaecat cillum eiusmod eu. Officia commodo duis aliqua veniam consectetur. Laboris esse ex fugiat occaecat anim.
                Consequat minim dolore ipsum cupidatat sunt Lorem anim do incididunt proident sunt aute amet aliquip. Incididunt voluptate sunt voluptate sint irure cillum est est elit veniam tempor mollit enim. Esse eu veniam pariatur ipsum. Amet qui anim ea deserunt est aliqua aliqua occaecat elit veniam ullamco. Mollit id irure aliquip laborum laborum velit culpa deserunt amet ad eu. Ipsum id aliqua mollit voluptate. Labore fugiat exercitation excepteur excepteur occaecat duis consequat.
                <br><br>
                Culpa anim consequat minim occaecat cupidatat in quis esse. Ea mollit est veniam commodo culpa in laborum fugiat cupidatat reprehenderit nulla anim dolore et. Velit occaecat pariatur sit sit deserunt incididunt officia aute labore id sunt culpa. Ea ipsum occaecat aliquip reprehenderit proident nulla dolor esse do consectetur veniam nulla. In commodo excepteur id non cillum. Veniam nostrud do culpa sit cupidatat esse sit veniam sint excepteur Lorem sit.
                Aliqua consectetur veniam excepteur incididunt ad. Qui elit mollit qui dolore ipsum mollit. Anim eiusmod quis voluptate non sint cupidatat. Culpa consequat nostrud sit ipsum laboris irure proident esse. Excepteur mollit sunt labore amet esse nostrud nostrud Lorem commodo deserunt velit duis non. Cillum anim id nisi ex sunt consequat tempor tempor id incididunt sit.
            </p>
        </section>
        <section class="sec3"></section>
        <section class="sec4"></section>
        <section class="sec5"></section>

    </div><!-- /div #app -->

    <!-- jQuery, Bootstrap, ... -->
    <script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(window).on('scroll', function() {
            if ($(window).scrollTop()) {
                $('nav').addClass('estrechada');
            } else {
                $('nav').removeClass('estrechada');
            }
        });
        //Mostrando/Ocultando lista de enlaces de menú para casos de responsivo
        /*$(document).ready(function() {
            $('.menu h4').click(function() {
                $('nav ul').toggleClass('active');
            });
        });*/
        //************************************************************
        $(document).ready(function() {
            $('.menu h4').click(function() {
                //$('nav ul').toggleClass('active');
                //---------------------------------------------
                if ($('nav ul').hasClass('fadeIn')) {
                    // if the div has fadeIn class, remove it and add fadeOut
                    $('nav ul').toggleClass('fadeIn').toggleClass('fadeOut')
                }
                else if ($('nav ul').hasClass('fadeOut')) {
                    // if the div has fadeOut class, remove it and add fadeIn
                    $('nav ul').toggleClass('fadeOut').toggleClass('fadeIn')
                } else {
                    // if the div has neither of fadeIn nor fadeOut, add fadeIn class in
                    $('nav ul').toggleClass('fadeIn')
                };
            });
        });
        $(window).bind('resize', function() {
            console.log($(this).width())
            if($(this).width() > 768){
                $('nav ul').removeClass('animated').removeClass('fadeOut')
            }
            else {
                $('nav ul').addClass('animated')
            }
        });
    </script>
</body>
</html>

app.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:700);

/* :: PARTE PÚBLICA :: */

/* ********** Reset Styles ********** */

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* ********** Bootstrap Styles ********** */

/* ********** Estilos Propios ********** */

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    padding: 10px 100px;
    box-sizing: border-box;
    transition: 0.5s;
}

nav.estrechada {
    background-color: rgba(0, 0, 0, 0.8);
    height: 80px;
    padding: 10px 50px;
}

nav .logo {
    float: left;
}

nav .logo img {
    height: 80px;
    transition: 0.5s;
}

nav.estrechada .logo img {
    height: 60px;
}

nav ul {
    float: right;
    margin: 0;
    padding: 0;
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    line-height: 80px;
    /*misma medida que la asignada como altura al CSS de la IMG del logo*/
    color: #262626;
    padding: 5px 20px;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    transition: 0.5s;
}

nav.estrechada ul li a {
    color: #fff;
    line-height: 60px;
    /*misma medida que la asignada como altura al CSS de la IMG del logo*/
}

nav ul li a.active,
nav ul li a:hover,
nav ul li.dropdown a:hover {
    color: #fff;
    background-color: #f00;
    text-decoration: none;
}

li.dropdown a.dropdown-toggle:hover {/**/
    color: white;
}

section.sec1 {
    width: 100%;
    height: 100vh;
    background-image: url(../images/header-cielo-01.jpg?52aaab2203e2dca5be8142e603d77828);
    background-size: cover;
}

section.sec2 {
    width: 100%;
    height: 100vh;
    background-image: url(../images/header-cielo-02.jpg?8ea857ffda8c2ffa533a095e958a6330);
    background-size: cover;
}

section.sec3 {
    width: 100%;
    height: 100vh;
    background-image: url(../images/header-cielo-03.jpg?fbb4096c33a4b4c760892baaf3d5bdc0);
    background-size: cover;
}

section.content {
    padding: 100px;
    text-align: justify;
}

section.content h1 {
    margin: 0;
    padding: 0;
    font-size: 2em;
}

section.content p {
    margin: 20px 0 0;
    padding: 0;
    font-size: 1.1em;
}

/* ********** Parte Responsive ********** */

.barra-responsive {
    display: none;
}

@media (max-width: 768px) {
    .barra-responsive {
        display: block;
        width: 100%;
        height: 60px;
        background-color: #262626;
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px 20px;
        box-sizing: border-box;
        z-index: 1;
    }

    .barra-responsive .logo img {
        float: left;
        height: 50px;
    }

    .barra-responsive .menu h4 {
        float: right;
        color: #fff;
        margin: 0;
        padding: 0;
        line-height: 50px;
        /*misma medida que la asignada como altura al CSS de la IMG del logo*/
        cursor: pointer;
        text-transform: uppercase;
    }

    nav,
    nav.estrechada {
        background-color: #262626;
        height: 60px;
        padding: 0;
    }

    nav .logo {
        display: none;
    }

    nav ul {
        position: absolute;
        width: 100%;
        top: 60px;
        left: 0;
        background-color: #262626;
        float: none;
        display: block;
        opacity: 0;
    }

    nav ul.active {
        display: block;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a,
    li.dropdown a.dropdown-toggle {/**/
        display: block;
        width: 100%;
        padding: 0;
        text-align: center;
        line-height: 30px !important;
        color: white;
    }
    .dropdown-menu {
        width: 98%;
        text-align: center;
    }
}

Esto es un equivalente en el CodePen

1 respuesta 1

0

prueba añadiendo en la seccion @media{...} de tu hoja de estilos:

.dropdown.show {
    height: 130px;
}
2
  • Gracias @neollob por tu aportación en tu comentario pero no es, exactamente lo que pretendía. Lo que tu propones es darle la misma anchura y color de fondo al elemento dropdown-menu. Y lo que yo deseo es que sea el <ul class="animated">o, en su defecto, el <li class="dropdown">, el que se expanda por dontener más contenido al desplegar el submenú de la opción de "CUENTA" (última opción del menú). Así, el color de fondo quedaría por debajo del submenú, independientemente del color de fondo que tuviera el ".dropdown-menu". Igual es necesario un cambio más profundo para lograrlo.
    – zacktagnan
    el 5 may. 2019 a las 21:02
  • Ah disculpa no lo habia entendido bien, en ese caso prueba con: '.dropdown.show{height: 130px;}'
    – neollob
    el 5 may. 2019 a las 21:30

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.