Hacer este menu responsive

[alexkurban]

Hola a todos, estoy intentando crear este menu responsive para pantallas tipo smartphone y ando muy perdido, este es el menu y el resultado final:

http://prntscr.com/7u0ex4

http://prntscr.com/7u0ell

y este es el codigo

Código HTML:

<div class="container12" id="menu">
        <div class="row">
            <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
            <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
            <div class="column5"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
            <div class="column3" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
        </div><!-- row-->

        <div class="row" id="sinEspacio" class="nav">
            <div class="column10" id="nav">
                <nav>
                    <ul>
                        <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                        <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                        <li class="active"><a href="#photo">ФОТОТЕХНИКА</a></li>
                        <li><a href="#notebooks">НОУТБУКИ</a></li>
                        <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                    </ul>
                </nav>
            </div>
            <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
        </div>    
    </div><!-- container-->
    <!-- END MENU NAVIGATION-->
    
    <!-- DROP DOWN MENU -->
        <div class="container16">
            <div class="row">
                <ul class="menu">
                    <li><a href="#">ЛЮБОГО ТИПА<img src="img/drop_dark.png" id="tipo" alt=""></a>
                        <ul>
                            <li><a href="#compacta">КОМПАКТ-КАМЕРА</a></li>
                            <li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li>
                            <li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li>
                            <li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="menu">
                    <li><a href="#marca">ЛЮБОГО БРЕНДА<img src="img/drop_dark.png" alt=""></a>
                        <ul>
                            <li><a href="#canon">CANON</a></li>
                            <li><a href="#nikon">NIKON</a></li>
                            <li><a href="#sony">SONY</a></li>
                            <li><a href="#fujifilm">FUJIFILM</a></li>
                            <li><a href="#samsung">SAMSUNG</a></li>
                            <li><a href="#olympus">OLYMPUS</a></li>
                            <li><a href="#panasonic">PANASONIC</a></li>
                            <li><a href="#polaroid">POLAROID</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="column2" id="precios" style="text-align: right"><p id="description">ПО ЦЕНЕ</p></div>
                <div class="column6">
                    <form> 
                        <input type="text" name="min" placeholder="ОТ">
                        <input type="text" name="max" placeholder="ДО">
                    </form>
                </div>
                <div class="column2" id="precios" style="text-align: left"><p id="description">РУБЛЕЙ</p></div>
            </div>
        </div>
    <!-- END DROPDOWN MENU--> 

estoy mirando tutoriales y intentando recabar información y lo veo negro... si pudieras echarme una mano os lo agradeceria mucho...

[AngelKrak]

no entendí muy bien amigo, que es en lo que necesitas ayuda exactamente? y si puedes sube el codigo a Codepen para poder verlo mejor ;)

[minari02]

Hola, es mi turno de darte una mano (espero poder) aun no pruebo esto pero puedes revisar.

[URL="http://www.falconmasters.com/css/guia-flexbox-layouts/"]http://www.falconmasters.com/css/guia-flexbox-layouts/[/URL]

[URL="http://www.falconmasters.com/css/guia-completa-flexbox/"]http://www.falconmasters.com/css/guia-completa-flexbox/[/URL]

[URL="http://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/"]http://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/[/URL]

Creo que podrian servirte.

Suerte.

[alexkurban]

Iniciado por AngelKrak

no entendí muy bien amigo, que es en lo que necesitas ayuda exactamente? y si puedes sube el codigo a Codepen para poder verlo mejor ;)

hola, estoy tratando de hacer este menu para cuando el dispositivo que habra la web sea un movil, asi tendria que quedar el menu:

http://prntscr.com/7uzb7r

Me he estado informando acerca de las media queries y el diseño responsivo y he logrado hacer algun progreso, asi me ha quedado de momento, pero no se como hacer que ese filtro de abajo si le pincho, me muestre el menu. asi es como me esta quedando de momento;

http://prntscr.com/7uzdj6


este es el codigo que he escrito en el header:

Código HTML:

<header>

        <div class="menuMob">
            <a href="#" ><i class="fa fa-bars fa-lg" id="menuMob"></i><img src="img/logo.png" alt="" id="logoMob"><i class="fa fa-search fa-lg" id="searchMob"></i><img src="img/cart_white.png" id="carritoMob" alt=""> </a>
        </div><!-- mobile menu bar-->

        <div class="navMob">
            <a href="#"><img src="img/filter_dark.png" id="filterMob" alt=""></a>
        </div>

        <div class="container12" id="menu">
            <div class="row">
                <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
                <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
                <div class="column5"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
                <div class="column3" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
            </div><!-- row-->

            <div class="row" style="margin-bottom: 0;" class="nav">
                <div class="column10" id="nav">
                    <nav>
                        <ul>
                            <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                            <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                            <li class="active"><a href="#photo">ФОТОТЕХНИКА</a></li>
                            <li><a href="#notebooks">НОУТБУКИ</a></li>
                            <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
            </div>    
        </div><!-- container-->
        <!-- END MENU NAVIGATION-->
        
        <!-- DROP DOWN MENU -->
            <div class="container16">
                <div class="row" id="tipos">
                    <ul class="menu">
                        <li><a href="#">ЛЮБОГО ТИПА<img src="img/drop_dark.png" id="tipo" alt=""></a>
                            <ul>
                                <li><a href="#compacta">КОМПАКТ-КАМЕРА</a></li>
                                <li><a href="#sinEspejo">БЕЗЗЕРКАЛЬНАЯ</a></li>
                                <li><a href="#espejo">ЗЕРКАЛЬНАЯ</a></li>
                                <li><a href="#medioFormato">СРЕДНЕФОРМАТНАЯ</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="menu">
                        <li><a href="#marca">ЛЮБОГО БРЕНДА<img src="img/drop_dark.png" alt=""></a>
                            <ul>
                                <li><a href="#canon">CANON</a></li>
                                <li><a href="#nikon">NIKON</a></li>
                                <li><a href="#sony">SONY</a></li>
                                <li><a href="#fujifilm">FUJIFILM</a></li>
                                <li><a href="#samsung">SAMSUNG</a></li>
                                <li><a href="#olympus">OLYMPUS</a></li>
                                <li><a href="#panasonic">PANASONIC</a></li>
                                <li><a href="#polaroid">POLAROID</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="column2" id="precios" style="text-align: right"><p id="description">ПО ЦЕНЕ</p></div>
                    <div class="column6">
                        <form> 
                            <input type="text" name="min" placeholder="ОТ">
                            <input type="text" name="max" placeholder="ДО">
                        </form>
                    </div>
                    <div class="column2" id="precios" style="text-align: left"><p id="description">РУБЛЕЙ</p></div>
                </div>
            </div>
    </header>
        <!-- END DROPDOWN MENU--> 

y aqui tengo el css en el mediaquery:

Código HTML:

@media only screen and (max-width: 400px) {
    body{
        padding-top: 100px;
    }

    #menu{
        display: none;
    }

    #tipos{
        display: none;
    }

    .menuMob{
        display: block;
        width: 100%;
        top: 0;
        padding: 10px;
        position: fixed;
        background: #48F;
        z-index: 1000;
    }

    #menuMob{
        margin-left: 10px;
        color: white;
    }

    #logoMob{
        margin-left: 30px;
        margin-right: 30px;
    }

    #searchMob{
        margin-right: 20px;
        color: white;
    }

    #carritoMob{
        float: right;
        margin-right: 30px;
    }
    
    .navMob{
        display: block;
        width: 100%;
        top: 45px;
        padding: 15px;
        position: fixed;
        z-index: 1005; 
        background: white;
    }

    #filterMob{
        float: right;
        margin-right: 35px;
    }

    #xe22{
        padding-bottom: 200px;
        border-top: 1px solid rgba(153, 153, 153, .2);
    }

    #carritoRed{
    float: right;
    }

    #xe22:hover{
        padding-bottom: 200px;
    }

estoy mirando los tutoriales que me habeis aconsejado

[alexkurban]

Estoy viendo que es imposible porque el menu de abajo no va a responder, tengo oculta la parte de arriba y el menu con display= none

Código HTML:

<div class="container12"[U] id="menu"[/U]>
            <div class="row">
                <div class="column2" id="logo"><img src="img/logo.png" alt=""></div><!-- Logo-->
                <div class="column2" id="tlf"><p>8 800 77 66 44</p></div><!-- tlf-->
                <div class="column5"><input type="search" placeholder="Busca tu Archivo" id="Buscador" /></div><!-- buscar-->
                <div class="column3" id="pago"><p>ОПЛАТА И ДОСТАВКА</p></div><!-- pago-->
            </div><!-- row-->

            <div class="row" style="margin-bottom: 0;" class="nav">
                <div class="column10" id="nav">
                    <nav>
                        <ul>
                            <li><a href="#smartphone">МОБИЛЬНЫЕ ТЕЛЕФОНЫ</a></li>
                            <li><a href="#tablet">ПЛАНШЕТЫ</a></li>
                            <li class="active"><a href="#photo">ФОТОТЕХНИКА</a></li>
                            <li><a href="#notebooks">НОУТБУКИ</a></li>
                            <li><a href="#tv">ТЕЛЕВИЗОРЫ</a></li>
                        </ul>
                    </nav>
                </div>
                <div class="column2"><a href="#" id="pagar"><img src="img/cart_white.png" id="carritoBlanco" alt="">PAGAR</a></div>
            </div>    
        </div><!-- container--> 

Código HTML:

@media only screen and (max-width: 400px) {
    body{
        padding-top: 100px;
    }

    #menu{
      [U]  display: none;[/U]
    }

    #tipos{
        display: none;
    }
}

y lo que he hecho a sido crear 2 lineas mas en las que tiene que estar la parte de arriba en azul y la parte de abajo en blanco con el icono de ajustes y el menu a la derecha.
este;
http://prntscr.com/7uzb7r


como lo puedo hacer, duplicando el menu?

[MrGilbertMan]

si usas bootstrap te va a facilitar enormemente esta tarea hay un manual en libros web, seguro que lo debes conocer o habrás oído hablar de ello.

Un saludo

[alexkurban]

Si se que usando el framework bootstrap se me hara mucho mas facil pero la tarea pedia que se hiciese codigo a pelo, y aparte creo que es mejor aprender a hacerlo sin frameworks.