Eduardo Fuerte
asked on
Could you point how to give Bootstrap's open/ close menu effect ?
Hi Experts
Could you point how to give Bootstrap's open/ close menu effect ?
Accordingly to:
Opened:
Desired effect In this static menu:
View code:
Could you suggest what's needed to have this effect apllyed ?
Thanks in advance!
Could you point how to give Bootstrap's open/ close menu effect ?
Accordingly to:
Opened:
Desired effect In this static menu:
View code:
<!-- Start: Sidebar -->
<aside id="sidebar_left" class="nano nano-light affix">
<!-- glyphicons CSS -->
<script src="<?php echo base_url();?>/public/assets/admin-tools/admin-forms/js/jquery.validate.min.js"></script>
<!-- Start: Sidebar Left Content -->
<div class="sidebar-left-content nano-content">
<!-- Start: Sidebar Header -->
<header class="sidebar-header bg-projeto">
<!-- Sidebar Widget - Author -->
<div class="sidebar-widget author-widget">
<div class="media">
<a class="media-left projeto-cursor-pointer">
<img src="<?php echo ($image_path = $this->session->userdata('image_path')) ? base_url($image_path) : base_url('undefined.jpg');?>" class="img-responsive">
</a>
<div class="media-body">
<div class="media-links">
<a href="#" class="sidebar-menu-toggle">Meu Menu</a>
<a href="<?php echo site_url('../auth/logout/');?>">
Sair
</a><br>
</div>
<div class="media-author">
<?php echo $this->session->userdata('full_name');?>
</div>
</div>
</div>
</div>
<!-- Sidebar Widget - Menu (slidedown) -->
<div class="sidebar-widget menu-widget mt20">
<div class="row text-center mbn">
<div class="col-xs-4">
<a class="text-info trocar_senha projeto-cursor-pointer" data-toggle="tooltip" data-placement="top" title="Mudar Senha">
<span class="glyphicons glyphicons-keys"></span>
</a>
</div>
<div class="col-xs-4">
<a class="text-info editar_avatar projeto-cursor-pointer" data-toggle="tooltip" data-placement="top" title="Mudar Foto">
<span class="glyphicons glyphicons-camera"></span>
</a>
</div>
</div>
</div>
<!-- Sidebar Widget - Search (hidden) -->
<div class="sidebar-widget search-widget hidden">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
<input type="text" id="sidebar-search" class="form-control" placeholder="Search...">
</div>
</div>
</header>
<!-- End: Sidebar Header -->
<!-- Start: Sidebar Menu -->
<ul class="nav sidebar-menu">
<li class="sidebar-label pt20">Menu</li>
<li>
<a href="<?php echo base_url('reclamacao'); ?>">
<span class="fa fa-phone"></span>
<span class="sidebar-title">Abertura de Reclamação</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
<li>
<a href="<?php echo base_url('reembolso'); ?>">
<span class="fa fa-money"></span>
<span class="sidebar-title">Solicitação de Reembolso</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
<hr />
<li>
<!--EF Dez/2016 - Cadastro de Clientes -->
<a href="<?php echo base_url('seguradora'); ?>">
<span class="fa fa-institution"></span>
<span class="sidebar-title">Cadastro de Clientes</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
<li>
<!--EF Dez/2016 - Cadastro de Produtos -->
<a href="<?php echo base_url('cliente'); ?>">
<span class="fa fa-folder-open-o"></span>
<span class="sidebar-title">Cadastro de Produtos</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
<li>
<!--EF Dez/2016 - Cadastro de Sub-Produtos -->
<a href="<?php echo base_url('sub_produto'); ?>">
<span class="fa fa-folder-o"></span>
<span class="sidebar-title">Cadastro de Sub-Produtos</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
<li>
<!--EF Dez/2016 - Cadastro de Prestadores -->
<a href="<?php echo base_url('prestador'); ?>">
<span class="fa fa-group"></span>
<span class="sidebar-title">Cadastro de Prestadores</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
<li>
<!--EF Dez/2016 - Cadastro de Serviços -->
<a href="<?php echo base_url('servico'); ?>">
<span class="fa fa-gears"></span>
<span class="sidebar-title">Cadastro de Serviços</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
...
</ul>
<!-- End: Sidebar Menu -->
</div>
<!-- End: Sidebar Left Content -->
</aside>
<!-- End: Sidebar Left -->
Could you suggest what's needed to have this effect apllyed ?
Thanks in advance!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You might consider to read this article which explain how to create an accordion with just few lines of code: https://www.experts-exchange.com/articles/21219/The-simplest-jQuery-Accordion-ever.html
ASKER
For color and distances is just plain css: if you have mantained my article id
What do you mean saying you get the icon horizontal? Maybe you can rotate it using jQuery, but I don't have a quick example now. But first explain what you mean by 'horizontal', please.
#mg-accordion li a{
color: #fff !important;
margin-left: 20px; // or so...
font-weight: bold; // I guess
}
What do you mean saying you get the icon horizontal? Maybe you can rotate it using jQuery, but I don't have a quick example now. But first explain what you mean by 'horizontal', please.
ASKER
After the changes you suggested:
Just the "acordion" menu title: Cadastros Básicos - still must to be adapted.
I guess the horizontal icon is related to:
Just the "acordion" menu title: Cadastros Básicos - still must to be adapted.
I guess the horizontal icon is related to:
-- Icon when the menu is opened?
.accordion-opened .accordion-toggle:after {
content: "\f054";
}
-- Maybe here ????
.accordion-closed .accordion-toggle:after {
content: "\f055";
}
Please, show me the markup for accordion: I really can't guess how the "acordion" menu title: Cadastros Básicos can be accessed by css if I don't see the markup.
For the icon, I suppose you have that icon for each list item with class 'dropdown' (accordingly to my mg-accordion: otherwise post here your code so I can see the changes you did).
If so, you just have to add some line to change the icon:
For the icon, I suppose you have that icon for each list item with class 'dropdown' (accordingly to my mg-accordion: otherwise post here your code so I can see the changes you did).
If so, you just have to add some line to change the icon:
dropdowns.on('click', function (e) {
//prevent default behavior
e.preventDefault();
//code for the icon
if ($(this).hasClass('accordion-open')){
$(this).removeClass('accordion-open').addClass('accordion-closed');
}else{
$(this).removeClass('accordion-closed').addClass('accordion-open');
}
// we are clicking on an anchor within a list item
// so we find all ul.submenu elements which are
// children of any list item which stays at the
// same level of its parent
var items = $(this).parents().siblings().find('ul.submenu');
// for each found ul element we do the following
items.each(function () {
if ($(this).is(':visible')) {
$(this).slideUp('slow');
}
});
// show and hide lists
$(this).siblings('ul.submenu').slideToggle();
});
ASKER
Here it is:
<style>
.accordion-toggle:after {
font-family: 'FontAwesome';
content: "\f078";
float: right;
}
.accordion-opened .accordion-toggle:after {
content: "\f054";
}
// Just a guess....
.accordion-closed .accordion-toggle:after {
content: "\f055";
}
.accordion li a{
color: #fff !important;
margin-left: 20px;
}
</style>
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Cadastros Básicos
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<li>
<!--EF Dez/2016 - Cadastro de Clientes -->
<a href="<?php echo base_url('seguradora'); ?>">
<span class="fa fa-institution"></span>
<span class="sidebar-title">Cadastro de Clientes</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
</div>
<div class="accordion-inner">
<li>
<!--EF Dez/2016 - Cadastro de Produtos -->
<a href="<?php echo base_url('cliente'); ?>">
<span class="fa fa-folder-open-o"></span>
<span class="sidebar-title">Cadastro de Produtos</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
</div>
<div class="accordion-inner">
<li>
<!--EF Dez/2016 - Cadastro de Sub-Produtos -->
<a href="<?php echo base_url('sub_produto'); ?>">
<span class="fa fa-folder-o"></span>
<span class="sidebar-title">Cadastro de Sub-Produtos</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
</div>
<div class="accordion-inner">
<li>
<!--EF Dez/2016 - Cadastro de Prestadores -->
<a href="<?php echo base_url('prestador'); ?>">
<span class="fa fa-group"></span>
<span class="sidebar-title">Cadastro de Prestadores</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
</div>
<div class="accordion-inner">
<li>
<!--EF Dez/2016 - Cadastro de Serviços -->
<a href="<?php echo base_url('servico'); ?>">
<span class="fa fa-gears"></span>
<span class="sidebar-title">Cadastro de Serviços</span>
<span class="sidebar-title-tray">
</span>
</a>
</li>
</div>
....
</div>
</div>
</div>
Ah, you're not using my code... Ok, then add an event handler for class accordion-toggle
$('.accordion-toggle').click(function(){
if ($(this).hasClass('accordion-open')){
$(this).removeClass('accordion-open').addClass('accordion-closed');
}else{
$(this).removeClass('accordion-closed').addClass('accordion-open');
}
});
This should do the trick.
ASKER
Mario
Your last code is running ok - accordingly with logs I checked.
But the icons still don't changes.
Maybe it's a matter of css incorrect declarations, could you check?
Your last code is running ok - accordingly with logs I checked.
But the icons still don't changes.
Maybe it's a matter of css incorrect declarations, could you check?
.accordion-opened .accordion-toggle:after {
content: "\f054";
}
.accordion-closed .accordion-toggle:after {
content: "\e080";
}
Look at this page: http://astronautweb.co/snippet/font-awesome/
fa-chevron-right (accordion-closed) should be "\f054" and fa-chevron-down (accordion-open) should be "\f078"
fa-chevron-right (accordion-closed) should be "\f054" and fa-chevron-down (accordion-open) should be "\f078"
ASKER
Ok, for the icons, I could adapt it later to the more adequated.
My doubt is about CSS code used to the classes, since the icons doesn't changes even if the code runs...
My doubt is about CSS code used to the classes, since the icons doesn't changes even if the code runs...
<script type="text/javascript">
$('.accordion-toggle').click(function(){
console.log('teste xyz'); //Ok
if ($(this).hasClass('accordion-open')){
console.log('teste open'); //Ok
$(this).removeClass('accordion-open').addClass('accordion-closed');
}else{
console.log('teste close'); //Ok
$(this).removeClass('accordion-closed').addClass('accordion-open');
}
});
</script>
Sorry, class is accordion-opened, not accordion-open... Try the correct class, please.
ASKER
Ok.
Even after this correction the icon doesn't changes...
Even after this correction the icon doesn't changes...
<script type="text/javascript">
$('.accordion-toggle').click(function(){
if ($(this).hasClass('accordion-opened')){
console.log('teste open'); //Ok
$(this).removeClass('accordion-opened').addClass('accordion-closed');
}else{
console.log('teste close'); //Ok
$(this).removeClass('accordion-closed').addClass('accordion-opened');
}
});
</script>
ASKER
But really, Marco
The most important thing was done... this part, icon changes, is only an accessory.
The most important thing was done... this part, icon changes, is only an accessory.
Ok, but if you had a link to a live page I would like to understand what's going wrong... I hate bugs :)
ASKER
Unfortunatelly it's an intranet site.
I guess this bug is someway related to how CSS classes is coded....
I guess this bug is someway related to how CSS classes is coded....
I understood the issue. We have to append the class to the patent element accordion-heading. From mobile is not comfortable. I'll give you the code later. Something like
$(this).parent('accordion- heading'). addClass.. . You have to rewrite the event handler following this suggestion. Otherwise be patient and wait for me :)
I have to go.
$(this).parent('accordion-
I have to go.
ASKER
Of course, Marco
I can wait the necessary time for you!
I can wait the necessary time for you!
Sorry, I'm still on mobile, but you can try this:
<script type="text/javascript">
$('.accordion-toggle').click(function(){
var p = $(this).parent('accordion-heading');
if (p.hasClass('accordion-opened')){
console.log('teste open'); //Ok
p.removeClass('accordion-opened').addClass('accordion-closed');
}else{
console.log('teste close'); //Ok
p.removeClass('accordion-closed').addClass('accordion-opened');
}
});
</script>
ASKER
Hi Marco
Still doesn't work out...
Still doesn't work out...
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Marco
Thank you very, very much for your dedication and expertise in this question!
Thank you very, very much for your dedication and expertise in this question!
:)