Menu icon Foundation

Coder

I like SASS

My Posts





My Comments

Carlo Vinci commented on Mary's post about 3 years

Hello, 
Im a little late here but I was having the same issue and thought I would share my alternative solution as this page (and other links) help me out. Instead of updating the core F6 JS files. I created a small jQuery script that duplicates the main menu item if it has children and places it within the submenu for mobile. 
This was based using an accordion for mobile. Free free to use and better this code. 
// Duplicate first sub menu item for mobile so you can open the accordion as well as click on the menu item
$('ul.menu.accordion-menu ul').each(function(){
var parent = $(this).parent();
$(this).prepend( "<li class='hide-for-medium'><a href='" + parent.find('a:first').attr('href') + "'>" + parent.find('a:first').html() + " Summary</a></li>" );
});
 
~ Cheers! 
 
 

Carlo Vinci commented on Ben Wills's post over 3 years

I was after the same menu structure. Accordion for mobile (no arrows) and dropdown for medium up. The issue I found using the below code, was the dropdown menu would open up to the right and not below the nav.

To fix this I realigned the dropdown like this, hopes this helps.

.first-sub {
top: auto;
left: auto;
}

Carlo Vinci commented on Carlo Vinci 's post almost 4 years

Big thanks Rafi after some testing I got it working.

~ Carlo

Carlo Vinci commented on Alan Smithee's post about 4 years

Hi All,

Found this post useful and thought i would update it with my 2 cents. This animates the top nav to slide open and close.

// SASS CODE
nav.top-bar {
@include transition-duration(.5s); // This is compass code, if not using compass replace with standard css
max-height: $topbar-height;
overflow: hidden;
height: auto;
&.expanded {
max-height: 500px;
}
.fa {
font-size: 18px;
}
}

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on Mary's post about 3 years

Hello, 
Im a little late here but I was having the same issue and thought I would share my alternative solution as this page (and other links) help me out. Instead of updating the core F6 JS files. I created a small jQuery script that duplicates the main menu item if it has children and places it within the submenu for mobile. 
This was based using an accordion for mobile. Free free to use and better this code. 
// Duplicate first sub menu item for mobile so you can open the accordion as well as click on the menu item
$('ul.menu.accordion-menu ul').each(function(){
var parent = $(this).parent();
$(this).prepend( "<li class='hide-for-medium'><a href='" + parent.find('a:first').attr('href') + "'>" + parent.find('a:first').html() + " Summary</a></li>" );
});
 
~ Cheers! 
 
 

You commented on Carlo Vinci 's post over 3 years
You commented on Ben Wills's post over 3 years

I was after the same menu structure. Accordion for mobile (no arrows) and dropdown for medium up. The issue I found using the below code, was the dropdown menu would open up to the right and not below the nav.

To fix this I realigned the dropdown like this, hopes this helps.

.first-sub {
top: auto;
left: auto;
}

You commented on Carlo Vinci 's post almost 4 years

Big thanks Rafi after some testing I got it working.

~ Carlo

You commented on Alan Smithee's post about 4 years

Hi All,

Found this post useful and thought i would update it with my 2 cents. This animates the top nav to slide open and close.

// SASS CODE
nav.top-bar {
@include transition-duration(.5s); // This is compass code, if not using compass replace with standard css
max-height: $topbar-height;
overflow: hidden;
height: auto;
&.expanded {
max-height: 500px;
}
.fa {
font-size: 18px;
}
}

Posts Followed

Following

  • No Content

Followers