Saudações,
Venho aqui novamente com uma dúvida, e acho que é uma mistura de conceitos, daí não saber bem onde postar. caso esteja errado peço a um administrador que mude a posição do tópico
A minha dúvida é replicar algo que não está responsive para responsive propriamente. a minha dúvida é: Fazer um menu que tenha estas funcionalidade:
http://prntscr.com/66ncyv
Isto é supostamente uma barra fica, que ao fazer hover sobre o azul da barra aparece:
http://prntscr.com/66ndaw
Aparece basicamente cada página referente ao icon. Pensei em fazer em jquery, que ao fazer um hover, ele soma um width e acrescenta um texto, com o display block numa class. Quando não existe hover, display none.
No entanto, e o meu maior problema é por esta barra fixa quando estamos a fazer scroll e também em mobile haver um botão na barra de cima, que não estou a conseguir fazê-lo.
Mostrando código, fui pela ideia do bootstrap, que foi fazer isto:
Código (HTML):
e também não me aparece o botão quando tou em mobile. será que é pelas posição estarem absolutas (isto é, dos icons?)
Caso não me esteja a explicar bem, um exemplo: http://ironsummitmedia.github.io/startbootstrap-sb-admin/tables.html (mudando apenas a funcionalidade do hover)
Os meus melhores cumprimentos,
Pedro Cruz
Venho aqui novamente com uma dúvida, e acho que é uma mistura de conceitos, daí não saber bem onde postar. caso esteja errado peço a um administrador que mude a posição do tópico
A minha dúvida é replicar algo que não está responsive para responsive propriamente. a minha dúvida é: Fazer um menu que tenha estas funcionalidade:
http://prntscr.com/66ncyv
Isto é supostamente uma barra fica, que ao fazer hover sobre o azul da barra aparece:
http://prntscr.com/66ndaw
Aparece basicamente cada página referente ao icon. Pensei em fazer em jquery, que ao fazer um hover, ele soma um width e acrescenta um texto, com o display block numa class. Quando não existe hover, display none.
No entanto, e o meu maior problema é por esta barra fixa quando estamos a fazer scroll e também em mobile haver um botão na barra de cima, que não estou a conseguir fazê-lo.
Mostrando código, fui pela ideia do bootstrap, que foi fazer isto:
Código (HTML):
<div class="navbar-fixed-top mmstop-bar">
<div class="mmstop-bar-logo">
Markdata Media Suite
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-pills nav-stacked leftbar mmsmenu">
<li><a runat="server" href="~/"><i class="fa fa-reply coloricon"></i>
<div class="itemmenumms" id="home">Página Principal</div>
</a></li>
<li><a runat="server" href="~/eTelereport"><i class="fa fa-signal coloricon"></i>
<div class="itemmenumms" id="eTelereport">eTelereport</div>
</a></li>
<li><a runat="server" href="~/iBrand"><i class="fa fa-pie-chart coloricon"></i>
<div class="itemmenumms" id="iBrand">iBrand</div>
</a></li>
<li><a runat="server" href="~/login"><i class="fa fa-pie-chart coloricon"></i>
<div class="itemmenumms" id="login">login</div>
</a></li>
</ul>
</div>
<div class="mmstop-bar-logo">
Markdata Media Suite
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-pills nav-stacked leftbar mmsmenu">
<li><a runat="server" href="~/"><i class="fa fa-reply coloricon"></i>
<div class="itemmenumms" id="home">Página Principal</div>
</a></li>
<li><a runat="server" href="~/eTelereport"><i class="fa fa-signal coloricon"></i>
<div class="itemmenumms" id="eTelereport">eTelereport</div>
</a></li>
<li><a runat="server" href="~/iBrand"><i class="fa fa-pie-chart coloricon"></i>
<div class="itemmenumms" id="iBrand">iBrand</div>
</a></li>
<li><a runat="server" href="~/login"><i class="fa fa-pie-chart coloricon"></i>
<div class="itemmenumms" id="login">login</div>
</a></li>
</ul>
</div>
e também não me aparece o botão quando tou em mobile. será que é pelas posição estarem absolutas (isto é, dos icons?)
Caso não me esteja a explicar bem, um exemplo: http://ironsummitmedia.github.io/startbootstrap-sb-admin/tables.html (mudando apenas a funcionalidade do hover)
Os meus melhores cumprimentos,
Pedro Cruz