Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rafa-martin

criar menu como o do microsoft outlook 2007

Por , em Desenvolvimento frontend

Recommended Posts

rafa-martin    2

rafa-martin
Postado

onde posso pegar um exemplo de um menu vertical, que funcione como a barra de tarefas do microsoft outlook 2007?

 

eu clico na barra e ela me abre com opções de navegação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

Seria na horizontal né?

Bom, você pode fazer isso ao passar o mouse (:hover) no menu que seria mais simples.. Se quiser que abra um submenu ao CLICAR no menu, você precisa de auxílio de algum script, como o Javascript (jQuery)

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado 
<html>  
<head>  
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
jQuery(document).ready(function( $ ){  
    var uls = $('#menu ul');  
    uls.hide();  
  
    $('#menu > li').click(function( e ){  
        e.stopPropagation();  
        uls.hide();  
        $( this ).find('ul').show();  
    });  
    $('#menu ul').click(function( e ){  
        e.stopPropagation();  
    });  
    $('body').click(function(){  
        uls.hide();  
    });  
});  
</script>  
<style type="text/css">  
* { list-style: none; }  
html, body { height: 100%; }  
body { font: 12px/12px Tahoma, sans-serif; color: #666; }  
#main { min-height: 100%; }  
#menu { height: 30px; }  
#menu li {  
    position: relative;  
    float: left;  
    padding: 0 10px;  
    height: 30px;  
    line-height: 30px;  
    border: 1px solid #666;  
}  
#menu ul {  
    position: absolute;  
    top: 30px;  
    left: -1px;  
    border: 1px solid #666;  
    background: #fff;  
}  
#menu li li {  
    width: 200px;  
    border: none;  
}  
</style>  
</head>  
<body>  
<div id="main">  
    <ul id="menu">  
        <li>Abrir sub 1  
            <ul>  
                <li>Item 1</li>  
                <li>Item 2</li>  
                <li>Item 3</li>  
                <li>Item 4</li>  
            </ul>  
        </li>  
        <li>Abrir sub 2  
            <ul>  
                <li>Item 1</li>  
                <li>Item 2</li>  
                <li>Item 3</li>  
            </ul>  
        </li>   
    </ul><!-- /menu -->  
</div><!-- /main -->  
</body>

Da próxima vez, procure estudar Javascript, porque podemos te ajudar dando o código que quiser, mas incentivamos (pelo menos eu) a ajudar o desenvolvimento de cada um

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafa-martin    2

rafa-martin
Postado

encontrei um exemplo legal nesse link: http://www.mraffaele.com/labs/css-only-accordions/ é o horizontal accordion menu.

 

mais o que eu preciso na verdade é que na verdade cada link no menu, seja direcionada para mesma div. ou seja, vamos supor que meus links seja, inserir, excluir e selecionar. quando eu clicar eu deles abrirá ao lado alguns controles (de acordo com que clicar no menu). ou seja, os menus na verdade serão fixos e não irão "trabalhar" como accordion.

 

entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito