Menú responsive con imágenes

el_cesar · #1 (**permalink**) 07/05/2014, 13:44

Hola, estoy en un dilema, para una web necesito hacer un menú con imagenes, el tema es que necesito agregarle efectos en el hover, para que cuando el usuario se pare con el mouse encima cambie de color, las imagenes ya las tengo, el cuento es que necesito que el menú sea adaptable a otras resoluciones, es decir que cuando se vea desde un smartphone o tablet se vea en un modo texto desplegable de un botón.

Alguna idea de como lograrlo?

pzin · #2 (**permalink**) 07/05/2014, 13:56

Intenta ser un poco más específico con tu problema. Hacerse seguramente se pueda hacer, pero decirte algo concreto sin saber nada mas que eso es complicado.

el_cesar · #3 (**permalink**) 07/05/2014, 15:41

Lo que necesito es:

1. crear un menu horizontal con imagenes roll over
2. lograr que ese menú sea responsive, es decir que, cuando se vea desde moviles se adapte a la pantalla

el_cesar · #4 (**permalink**) 07/05/2014, 15:51

Bueno, siguiendo un tuto que encontré ya he logrado crear el menú responsive, lo tengo en esta url para ensayo http://www.crmbusiness.biz/menu/ lo que me falta ahora es que, cuando se vea desde una resolución angosta desplace tambien el contenedor del menú hacia abajo, porque si lo ven ahora, el menú se organiza hacia abajo pero queda oculto, solucionando eso me evito más canas jejeje.

Agradezco la ayuda

Ahhh, lo otro que necesito es, que entre cada botón haya una línea punteada que tambien es una imagen.

Zeromm · #5 (**permalink**) 07/05/2014, 15:53

Si sabes hacer un menú responsive sin imagenes... es exactamente igual.

Si no sabes como se hacen aquí tienes dos ejemplos

http://codepen.io/zoony/pen/kdInb

http://codepen.io/dpowl/pen/LIdrG

Zeromm · #6 (**permalink**) 07/05/2014, 15:56

Cita:

Iniciado por el_cesar

Bueno, siguiendo un tuto que encontré ya he logrado crear el menú responsive, lo tengo en esta url para ensayo http://www.crmbusiness.biz/menu/ lo que me falta ahora es que, cuando se vea desde una resolución angosta desplace tambien el contenedor del menú hacia abajo, porque si lo ven ahora, el menú se organiza hacia abajo pero queda oculto, solucionando eso me evito más canas jejeje.

Agradezco la ayuda

Ahhh, lo otro que necesito es, que entre cada botón haya una línea punteada que tambien es una imagen.

Ese menú no es responsive... ya que a medida que reduces el ancho del navegador no se "recolocan" o "redistribuyen" los elementos, si no que van desapareciendo. Osea, cuando entres desde un movuil solo aparece el menú de "inicio"

el_cesar · #7 (**permalink**) 07/05/2014, 16:08

Zeromm, Gracias por la sugerencia, sin embargo hice la prueba con el segundo ejemplo que me das

lo implementé de la siguiente manera:

index

Código PHP:

Ver original<head>
    <link rel="stylesheet" type="text/css" href="estilos2.css" />
    <script type="text/javascript">
$(document).ready(function() {
          /*! http://tinynav.viljamis.com v1.03 by @viljamis */
            (function ($, window, i) {
              $.fn.tinyNav = function (options) {
            
                // Default settings
                var settings = $.extend({
                  'active' : 'selected', // String: Set the "active" class
                  'header' : false // Boolean: Show header instead of the active item
                }, options);
            
                return this.each(function () {
            
                  // Used for namespacing
                  i++;
            
                  var $nav = $(this),
                    // Namespacing
                    namespace = 'tinynav',
                    namespace_i = namespace + i,
                    l_namespace_i = '.l_' + namespace_i,
                    $select = $('<select/>').addClass(namespace + ' ' + namespace_i);
            
                  if ($nav.is('ul,ol')) {
            
                    if (settings.header) {
                      $select.append(
                        $('<option/>').text('Navigation')
                      );
                    }
            
                    // Build options
                    var options = '';
            
                    $nav
                      .addClass('l_' + namespace_i)
                      .find('a')
                      .each(function () {
                        options +=
                          '<option value="' + $(this).attr('href') + '">' +
                          $(this).text() +
                          '</option>';
                      });
            
                    // Append options into a select
                    $select.append(options);
            
                    // Select the active item
                    if (!settings.header) {
                      $select
                        .find(':eq(' + $(l_namespace_i + ' li')
                        .index($(l_namespace_i + ' li.' + settings.active)) + ')')
                        .attr('selected', true);
                    }
            
                    // Change window location
                    $select.change(function () {
                      window.location.href = $(this).val();
                    });
            
                    // Inject select
                    $(l_namespace_i).after($select);
            
                  }
            
                });
            
              };
            })(jQuery, this, 0);
            
            $(".nav-list").tinyNav();});
 
    </script>
</head>
 
<!--Pattern HTML-->
  <div id="pattern" class="pattern">
        <!--Begin Pattern HTML-->
        <nav class="navigation" role="navigation">
            <ul class="nav-list">
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Products</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Locations</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </div>
    <!--End Pattern HTML-->
    
    <div class="container"> 
        <section class="pattern-description">
            <h1>Select Menu</h1>
            <p>One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This is a clever way to save real estate.</p>
            <h3>Pros</h3>
            <ul>
                <li><strong>Frees up plenty of space</strong>- a select menu definitely takes up a lot less space than a horizontal or vertical list of links </li>
                <li><strong>Keeps interactions in the header</strong>- instead of a footer nav, the select menu keeps the navigation functionality in the header, where users are used to seeing web navigation</li>
                <li><strong>Easily Recognizable</strong>- a select menu with a clear label saying &#8220;navigation” or “menu” is definitely easy for users to figure out.  </li>
                <li><strong>Pulls up native controls</strong>- each mobile browser will handle select menus their own way. Touch devices will pull up the nav in a touch friendly list, while trackball/d-pad/pearl devices will pull up a select menu more conducive to that particular input method.</li>
            </ul>
            <h3>Cons</h3>
            <ul>
                <li><strong>Lack of styling control</strong>- select menus are a pain in the ass to style. Each browser handles them in their own, usually clunky, way. Forget about cross-browser styling and coming out with anything that looks halfway consistent. As a result, the select menu can stick out like a sore thumb and really dirty up an otherwise good-lookin&#8217; design.</li>
                <li><strong>Potentially confusing</strong> &#8211; Users are used to select menus in the context of filling out a form, but I’m not sure they’d grasp a form element out of that context. This is simply a hunch, so it would be interesting to test.</li>
                <li><strong>Handling subnav items</strong>- nested lists handled by select menus can look weird. Child categories are usually handled by <a href="http://media.smashingmagazine.com/wp-content/uploads/2011/12/prog-resp-nav_13.jpg">indenting with dashes</a>, and while it might get the point across I see it as potentially confusing and a little ugly.</li>
                <li><strong>Javascript dependency</strong>- It doesn&#8217;t require too much JS to convert the list to a select menu, but it’s worth pointing out simply because mobile browsers do the dardest things. But again, the technique is pretty cut and dry so there shouldn’t be too many hang ups using this approach.</li>
            </ul>
            <h3>Resources</h3>
            <ul>
                <li><a href="http://tinynav.viljamis.com/">TinyNav</a> by <a href="https://twitter.com/viljamis">@viljamis</a></li>
                <li><a href="http://css-tricks.com/convert-menu-to-dropdown/">Convert a Menu to a Dropdown for Small Screens</a></li>
                <li><a href="http://coding.smashingmagazine.com/2012/02/13/progressive-and-responsive-navigation/">Progressive and Responsive Navigation</a></li>
                <li><a href="https://github.com/mattkersley/Responsive-Menu">Responsive Menu</a></li>
            </ul>
            <h3>In the Wild</h3>
            <ul>
                <li><a href="http://viljamis.com/">Viljami Salminen</a></li>
                <li><a href="http://retreats4geeks.com/">Retreats 4 Geeks</a></li>
                <li><a href="http://www.fivesimplesteps.com">Five Simple Steps</a></li>
                <li><a href="http://www.performancemarketingawards.co.uk/">Performance Marketing Awards</a></li>
            </ul>
        </section>
        <footer role="contentinfo">   
            <div>
                <nav id="menu">
                    <a href="http://www.forosdelweb.com/f53/patterns.html">&larr;More Responsive Patterns</a>
                </nav>
            </div>
        </footer>
    </div>

estilos2.css

Código CSS:

Ver original.navigation {
        padding: 1em;
        }
        select {
            width: 100%;
        }
        .nav-list {
            overflow: hidden;
        }
        .nav-list li {
            float: left;
            margin-right: 1em;
        }
        
        /* styles for desktop */
        .tinynav { display: none }
        
        /* styles for mobile */
        @media screen and (max-width: 37.5em) {
            .tinynav { display: block }
            .nav-list { display: none }
        }

y lo que sucede es, cuando reduzco el ancho de la pantalla, se desaparece el menú pero no me aparece el menu desplegable, sabes que puede estar pasando?

el_cesar · #8 (**permalink**) 07/05/2014, 17:27

creo que ya voy encontrando la solución, la tengo implementada aquí http://www.crmbusiness.biz/purah2/

todo va bien, sin embargo lo que sucede ahora es que al reducir el ancho de pantalla no me aparece el menú, alguna idea de como solucionarlo?

javiaroni · #9 (**permalink**) 06/01/2016, 12:19

y como se logra hacer???? amigo el_cesar como lo lograste hacer funcionar?

g3kdigital · #10 (**permalink**) 06/01/2016, 15:38

Saludos

Vi lo que intentas hacer y creo que no lo estas logrando responsive, yo lo haría con 3 media queries, para que cuando se redusca el espacio ocupe 2 hileras con 3 elementos, más pequeño con 2 y aún más pequeño, tipo menú hamburguesa (que no lo hice clickeable, solo hover porque no quise meter nada de javascript, ni complicarme con marcado extra en el html).

En fin, este es link del demo, cogi las imagenes de tu servidor y espero te de ideas.

http://codepen.io/g3kdigital/pen/yeMxaV?editors=110

También reduje los elementos que tenías en el html, quite las imágenes de puntos y las replique con solo css, pienso que el hover de los links lo podrías hacer mejor con imágenes en el background y no con imágenes embebidas, pero esa que tienes es una opción.