1

Estoy trabajando en un proyecto ASP.NET MVC, me encuentro maquetando el Layout, tengo la estructura de la maquetación en la cual en el header en una etiqueta section deseo poner el icono del botón de menú y en una etiqueta aside que esta debajo del header deseo poner el cuerpo del menú despegable, muestro código.

Maquetación:

<body>
<header>
    <section id="menu"></section>
    <section id="banner"></section>
    <section id="user"></section>
    <section id="sesion"></section>
</header>
@*<nav></nav>*@
<main>
    <aside id="left">

    </aside>
    <article>

    </article>
</main>
<footer>

</footer>

Menu:

<div class="container demo-4">
    <div class="column">
        <div id="dl-menu" class="dl-menuwrapper">
            <button class="dl-trigger">Open Menu</button>
            <ul class="dl-menu">
                <li>
                    <a href="#">Mantenimiento</a>
                    <ul class="dl-submenu">
                        <li>
                            <a href="Cliente/index">Cliente</a>
                            @*<ul class="dl-submenu">
                                <li><a href="#">Shirts</a></li>
                                <li><a href="#">Jackets</a></li>
                                <li><a href="#">Chinos &amp; Trousers</a></li>
                                <li><a href="#">Jeans</a></li>
                                <li><a href="#">T-Shirts</a></li>
                                <li><a href="#">Underwear</a></li>
                            </ul>*@
                        </li>
                        <li>
                            <a href="#">Articulo</a>
                            @*<ul class="dl-submenu">
                                <li><a href="#">Jackets</a></li>
                                <li><a href="#">Knits</a></li>
                                <li><a href="#">Jeans</a></li>
                                <li><a href="#">Dresses</a></li>
                                <li><a href="#">Blouses</a></li>
                                <li><a href="#">T-Shirts</a></li>
                                <li><a href="#">Underwear</a></li>
                            </ul>*@
                        </li>
                        <li>
                            <a href="#">Proveedor</a>
                            @*<ul class="dl-submenu">
                                <li><a href="#">Boys</a></li>
                                <li><a href="#">Girls</a></li>
                            </ul>*@
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Electronics</a>
                    <ul class="dl-submenu">
                        <li><a href="#">Camera &amp; Photo</a></li>
                        <li><a href="#">TV &amp; Home Cinema</a></li>
                        <li><a href="#">Phones</a></li>
                        <li><a href="#">PC &amp; Video Games</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Furniture</a>
                    <ul class="dl-submenu">
                        <li>
                            <a href="#">Living Room</a>
                            <ul class="dl-submenu">
                                <li><a href="#">Sofas &amp; Loveseats</a></li>
                                <li><a href="#">Coffee &amp; Accent Tables</a></li>
                                <li><a href="#">Chairs &amp; Recliners</a></li>
                                <li><a href="#">Bookshelves</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">Bedroom</a>
                            <ul class="dl-submenu">
                                <li>
                                    <a href="#">Beds</a>
                                    <ul class="dl-submenu">
                                        <li><a href="#">Upholstered Beds</a></li>
                                        <li><a href="#">Divans</a></li>
                                        <li><a href="#">Metal Beds</a></li>
                                        <li><a href="#">Storage Beds</a></li>
                                        <li><a href="#">Wooden Beds</a></li>
                                        <li><a href="#">Children's Beds</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Bedroom Sets</a></li>
                                <li><a href="#">Chests &amp; Dressers</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Home Office</a></li>
                        <li><a href="#">Dining &amp; Bar</a></li>
                        <li><a href="#">Patio</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Jewelry &amp; Watches</a>
                    <ul class="dl-submenu">
                        <li><a href="#">Fine Jewelry</a></li>
                        <li><a href="#">Fashion Jewelry</a></li>
                        <li><a href="#">Watches</a></li>
                        <li>
                            <a href="#">Wedding Jewelry</a>
                            <ul class="dl-submenu">
                                <li><a href="#">Engagement Rings</a></li>
                                <li><a href="#">Bridal Sets</a></li>
                                <li><a href="#">Women's Wedding Bands</a></li>
                                <li><a href="#">Men's Wedding Bands</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div><!-- /dl-menuwrapper -->
    </div>
</div>
3
  • 3
    ¿Cuál es el problema?
    – gugadev
    el 13 mar. 2017 a las 18:31
  • @GustavoGarcía, necesito poner el boton del menu en el seccion id=menu y el cuerpo del despegable en el aside left el 13 mar. 2017 a las 18:35
  • @PedroÁvila y si dibujas usando Paint la idea que tienes en mente? Por lo que veo, le hace falta claridad a la pregunta :D
    – fredyfx
    el 13 mar. 2017 a las 23:40

1 respuesta 1

0

Me parece que la solución que buscas está mas por el lado de javascript y css.

El botton lo podés implementar con un button, img, con font-aweson, o con un link y darle estilo con css.

Luego con javascript o jquery podes engancharte al click del botón y ahí mostras o no el contenido en el aside también con jquery o con javascript.

Si el contenido es dinámico y no está presente en la página al momento del click, lo podés traer del server usando ajax que con jQuery es muy sencillo.

O por ahí no me quedó clara la pregunta.

Tu Respuesta

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

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