Optimizar efecto acordeón

migueljo_12 · #1 (**permalink**) 07/05/2014, 19:40

Hola!
Espero que esten genial

Soy nuevo por el foro tambien lo soy en el desarrollo web.
Tengo un problemita, quiero que cuando pase el mouse por ulgunos de los elementos li estos se espandan en forma horizontal y a la vez contraer a los demas.
El problema es que se salen verticalmente de la caja.
Muchas gracias por su preciada atencion, el codigo es el siguiente.

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
    <title>Efecto aumentar</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
        nav
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }
        ul.barra
        {
            width: 50%;
            height: 100px;
            margin: 0 auto;
            padding: 0; 
        }
        ul.barra > li
        {
            display: inline-block;
            margin: 0;
            width: 25%;
            height: 100%;
            float: left;
            transition: .7s;
            list-style: none;
        }
        ul.barra > li:hover
        {
            width: 55%;
        }
    </style>
</head>
<body>
    <nav>
        <ul class="barra">
            <li style="background-color: #23A38F;"></li>
            <li style="background-color: #B7C11E;"></li>
            <li style="background-color: #EFF1C2;"></li>
            <li style="background-color: #F0563D;"></li>
        </ul>
    </nav>
</body>
</html>

codeams · #2 (**permalink**) 07/05/2014, 20:33

Es posible que los elementos li tengan un padding por defecto dependiendo del navegador. Establece el padding en cero y prueba. También puedes utilizar reset.css y normalize.css para evitar este tipo de dificultades.

Yo hago algo como esto siempre antes de iniciar un proyecto:

Código CSS:

Ver original*, *:before, *:after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

migueljo_12 · #3 (**permalink**) 07/05/2014, 21:31

Ya probe importando normalize y reset; tambien le puse

Código CSS:

Ver originalpadding: 0;

y nada aún

YYs86 · #4 (**permalink**) 08/05/2014, 09:05

Se me ocurre pero no solo con CSS, sino usando también Jquery:

Código PHP:

Ver original<!doctype html>
<html lang="es">
<head>
    <title>Efecto aumentar</title>
    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
        }
        nav
        {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }
        ul.barra
        {
            width: 50%;
            height: 100px;
            margin: 0 auto;
            padding: 0; 
        }
        ul.barra > li
        {
            display: inline-block;
            margin: 0;
            width: 25%;
            height: 100%;
            float: left;
            transition: .7s;
            list-style: none;
        }
        ul.barra > li.active
        {
            width: 55%;
        }
        ul.barra > li.notactive
        {
            width: 15%;
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
    <script>
    
    $(document).ready(function() {
    
        $('.barra li').hover(function() {
        
            $('.barra li').each(function() {
            
                $(this).addClass('notactive');
            
            });
            
            $(this).removeClass('notactive').addClass('active');
        
        }, function() {
        
            $('.barra li').each(function() {
            
                $(this).removeClass('active').removeClass('notactive');
            
            });
        
        });
    
    });
    
    </script>
    
</head>
<body>
    <nav>
        <ul class="barra">
            <li style="background-color: #23A38F;"></li>
            <li style="background-color: #B7C11E;"></li>
            <li style="background-color: #EFF1C2;"></li>
            <li style="background-color: #F0563D;"></li>
        </ul>
    </nav>
</body>
</html>

migueljo_12 · #5 (**permalink**) 08/05/2014, 13:26

Con Jquery sale perfecto pero la meta principal es solo hacerlo con css
Muchas gracias