Skip to content

Instantly share code, notes, and snippets.

@jhonsore

jhonsore/menu.html

Last active February 18, 2016 13:47
Show Gist options
  • Save jhonsore/2721702e45ca0b61488b to your computer and use it in GitHub Desktop.
Save jhonsore/2721702e45ca0b61488b to your computer and use it in GitHub Desktop.
Download ZIP
Slider Menu opened by link (Open a deep menu according to the menu id anchor)
Raw
menu.html
<div class="menu-wrapper">
<div class="menu-slider">
<div class="menu">
<ul>
<li>
<div class="menu-item"><a href="home.php" class="menu-anchor" data-menu="1">Ocorrências</a><i class="spt spt-arrow-right-menu"></i></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="menu-anchor" data-menu="2">Perdas Teóricas</a><i class="spt spt-arrow-right-menu"></i></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="">Relatórios de Turno</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="">Cadastros Auxiliares</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="">Organograma</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="menu-anchor" data-menu="3">Painel</a><i class="spt spt-arrow-right-menu"></i></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="">Natureza</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="menu-anchor" data-menu="4">Unidade</a><i class="spt spt-arrow-right-menu"></i></div>
</li>
</ul>
</div>
<div class="submenu menu" data-menu="1">
<div class="submenu-back">
<div class="menu-item"><i class="spt spt-arrow-left-menu"></i><a href="#" class="menu-back">VOLTAR</a></div>
</div>
<ul>
<li>
<div class="menu-item"><a href="home.php" class="menu-anchor" data-menu="5">Item do menu 1</a><i class="spt spt-arrow-right-menu"></i></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Sobre</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Natureza Orgânica</a></div>
</li>
</ul>
</div>
<div class="submenu menu" data-menu="2">
<div class="submenu-back">
<div class="menu-item"><i class="spt spt-arrow-left-menu"></i><a href="#" class="menu-back">VOLTAR</a></div>
</div>
<ul>
<li>
<div class="menu-item"><a href="home.php">Item do menu 2</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
</ul>
</div>
<div class="submenu menu" data-menu="3">
<div class="submenu-back">
<div class="menu-item"><i class="spt spt-arrow-left-menu"></i><a href="#" class="menu-back">VOLTAR</a></div>
</div>
<ul>
<li>
<div class="menu-item"><a href="home.php" >Item do menu 3</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
</ul>
</div>
<div class="submenu menu" data-menu="4">
<div class="submenu-back">
<div class="menu-item"><i class="spt spt-arrow-left-menu"></i><a href="#" class="menu-back">VOLTAR</a></div>
</div>
<ul>
<li>
<div class="menu-item"><a href="home.php">Item do menu 4</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
</ul>
</div>
<div class="submenu menu" data-menu="5">
<div class="submenu-back">
<div class="menu-item"><i class="spt spt-arrow-left-menu"></i><a href="#" class="menu-back">VOLTAR</a></div>
</div>
<ul>
<li>
<div class="menu-item"><a href="home.php">Clientes</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php" class="menu-anchor" data-menu="14">Item do menu 5</a><i class="spt spt-arrow-right-menu"></i></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
</ul>
</div>
<div class="submenu menu" data-menu="14">
<div class="submenu-back">
<div class="menu-item"><i class="spt spt-arrow-left-menu"></i><a href="#" class="menu-back">VOLTAR</a></div>
</div>
<ul>
<li>
<div class="menu-item"><a href="home.php">Notícias</a></div>
</li>
<li>
<div class="menu-item"><a href="home.php">Item do menu</a></div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
Raw
menu.js
var _itens = $('.menu ul a').not('.menu-anchor');
_itens.each(function(index){
$(this).data('anchor',index+1);
var _href = $(this).attr('href');
var utm = ((/\?/.test(_href)) ? '&' : '?')+"id_menu="+$(this).data('anchor');
$(this).attr('href',utm);
});
var QueryString = function ()
{
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined")
{
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
}
else if(typeof query_string[pair[0]] === "string")
{
var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
query_string[pair[0]] = arr;
// If third or later entry with this name
}
else
{
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}();
if(QueryString.id_menu)
{
_itens.each(function(index){
var _bt = $(this);
if(_bt.data('anchor') == String(QueryString.id_menu))
{
var _pos = getPositionMenu (this);
_bt.closest('.menu-item').addClass('ativo');
if(_pos)
{
_pos = String(_pos);
var _arrPath = (_pos.indexOf('/') !== -1) ? _pos.split("/").reverse() : [ _pos ];//pega o caminho, converte em array e inverte
$.each(_arrPath, function( index, value ) {
var _item = $('.submenu[data-menu="'+value+'"]');
_item.show();
var _pos = $(".menu-slider").position().left - $.appMenu.menu_width;
$(".menu-slider").stop(true,true).css({left: _pos});
});
}
setTimeout(showMenu,200);
return false;
}
});
}
else
{
$('.menu-wrapper').css({visibility:'visible'});
}
function showMenu ()
{
$('.menu-wrapper').css({display:'none'});
$('.menu-wrapper').fadeIn(200);
$('.menu-wrapper').css({visibility:'visible'});
}
//retorna o caminho percorrido do item no menu
function getPositionMenu (__el__)
{
var _path;
var _menu = $(__el__).closest('.menu');
var _data = _menu.data('menu');
if(_data)
{
var _item = $('.menu-anchor[data-menu="'+_data+'"]');
_path = _data;
_menu = _item.closest('.menu');
_data = _menu.data('menu');
if(_data)
{
_path += '/'+getPositionMenu(_item);
}
}
return _path;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment