Menu icon Foundation

Developer | London

My Posts

  • NEW
  • Accordion Menu CSS class

    By Walking In The Darkness

    accordionMenu

    According to the video on Accordion Menu documentation page: <ul class="vertical menu" data-accordion-menu> <!-- (...) --> </ul>   is enough to create an accordion, but according to documentation example on the same page you ne... (continued)


My Comments

Walking In The Darkness commented on Sven's post 11 days

Foundation does contain tools to achieve layout without (explicit) floating.I have used floats as

first - I don't know what grid system do you use,
second - I use old "float" based system and don't know "XY" system at all,
and lastly - I use Sass version so I was able to do sth like this:

#dashboard-off-canvas {

@include breakpoint(medium) {
@include grid-column;
@include grid-column-size(4);
}
// (...)
}

dashboard .off-canvas-content {

@include grid-column;

@include breakpoint(medium) {
@include grid-column-size(8);
}
(...)
}
so, as you can see I aplied grid starting from breakpoint where I want sidebar to be "in-canvas". If I remember (!) it did not work when I just applied classes to elements (instead using mixins) (but I may be wrong as well).Side note - I am actually more happy having this with the use of mixins as the code is more semantic.

Walking In The Darkness commented on Sven's post 11 days

@Sven, sure you can, you just need to set up off-canvas/in-canvas-for-medium container.
look at the code-pen example here:Foundation Off/In-Canvas

Walking In The Darkness commented on SD Mattos's post 20 days

Quickest solution: add class of "row" to .top-bar
<header>
<div class="top-bar row text-center">

     &lt;!-- (...) --&gt;

</div>
</header>
here's a link to codepen example with your menu:
Centered TopBar v.1
 
by default .row has a maximum width of 1200px
in this case on larger screen you will have no background color on the right and left side of TopBar 
If that's not what you want (if instead of this you want to visually have the same color from right to left side of page but TopBar content width limited to 1200px) wrap yout TopBar (div#top-bar-wrap) and apply background-color of .topbar to it
<header>
<div id="top-bar-wrap">
<div class="top-bar row text-center">

        &lt;!-- (...) --&gt;

  &lt;/div&gt;

</div>
</header>
codepen here:Centered TopBar v.1a
 

Walking In The Darkness commented on Sourg's post 20 days

Oooops. I am sorry, I missed the point, you are right, there is no overlay after resizing. I meant that off-canvas is working in my previous reply, Yes HTML of overlay 
<div class="js-off-canvas-overlay is-overlay-fixed is-visible is-closable"></div>
is only present in page source view when page is loaded in small and not when you resize down.
 
 

Walking In The Darkness commented on Sourg's post 21 days

I've looked at your pen and it works regardless of page being loaded on a small screen or on large and resized down.
 

Walking In The Darkness commented on Glenn Philp's post 21 days

First, apologise, I answered to quickly and now realised you wanted normal, open but vertical menu starting from medium. I thought it was to be normal horizontal, what basically would be dropdown,Looking into docs I cannot find a way how to do this except destroying accordion plugin starting from medium screen?
<ul id="my-menu" class="vertical menu accordion-menu">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
<ul class="vertical nested menu">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
<li><a href="#">Link 2.5</a></li>
<li><a href="#">Link 2.6</a></li>
</ul>
</li>
<!-- (...) -->
</ul>
and then JS:
$(document).foundation();

// Instantiate new accordion menu only if small screen
if (Foundation.MediaQuery.is('small only')) {
var elem = new Foundation.AccordionMenu($('#my-menu'));
}

// React to screen size change
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){

// only when we move from small to bigger
if(newSize == "medium" &amp;&amp; oldSize == "small") {

    $('#my-menu').foundation('_destroy');
}

// only when we move back to small
// Instantiate accordion menu
if(newSize == "small" &amp;&amp; oldSize == "medium") {

var elem = new Foundation.AccordionMenu($('#my-menu'));
}
});

Walking In The Darkness commented on Nikolay 's post 21 days

oh, and:2. When? Any time you need to modify how something looks. You may create basic rules for all paragraphs in your code without using classes, just assigning rules to HTML element:
p {
color: black;
font-size: 1em;
}
and then, if you want some of your paragraphs to look different -> give them a class and create rules for this class:
.red-text {
color: red;
}

.large-text {
font-size: 2em;
}
and now you can use them in your HTML:
<p>This paragraph is black and has font size of 1em</p>
<p class="red-text">This paragraph is red and has font size of 1em</p>
<p class="large-text">This paragraph is black and has font size of 2em</p>
<p class="red-text large-text">This paragraph is red and has font size of 2em</p>

Walking In The Darkness commented on Nikolay 's post 21 days

@Nikolay, class is an HTML attribute that can be assigned to any HTML element, classes are technically optional attributes so you do not have to add them to your code (I mean HTML without classes will validate) but of course in such a case your page will look almost like a text document with some limited styling added by your web browser - so you want to use them.1. Where? - you place class attribute within opening tag of HTML element and assign some value (name of the class):HTML paragraph element:
<p>Some text goes here...</p>
with added class:
<p class="red-text">Some text goes here...</p>

of course at that moment visually you will not see any change, you need to create some rules for this specific class (that's what are they used for!), so in CSS file:
.red-text {
color: red;
}
now, you have rule created and class assigned to HTML element, this will work. The same class may be assigned to more than one element on the page:
<p class="red-text">This is a paragraph with red text</p>

<p>This paragraph has default text color</p>

<h1 class="red-text">This header will also be red</h1>
Of course if you use some CSS Framework, like e.g. Foundation, some rules for specific classes have already been created for you and you can just add them to your HTML elements and this wil work (without writing CSS rules), like for example this:
<p class="stat">This text will be enlarged because that's what built-in Foundation .stat class does</p>
…but nothing stops you from overwritting rules pre-defined by Foundation if you only want:
.stat {
font-size: 0.8em;
}
you can add more than one class to the same HTML element (separated by space):
<p class="red-text stat">As you can expect this paragraph has large AND red text</p>
 
 
 

Walking In The Darkness commented on Glenn Philp's post 22 days

Glenn, it seems you are mixing CSS classes with data attributes (for JS), there is no "data-medium-vertical" option, try this:
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
<!-- (...) -->
</ul>

Posts Followed




  • 3
    Replies
  • Classes

    By Nikolay

    classeshtmlcsscodegrid

    I'm new to Foundation framework and to front end development. Prior to me trying to write any kind of code, I have learned the HTML and CSS fundamentals and obtained knowledge that might be considered more "advanced". Done codecademy exercises involving p... (continued)

    Last Reply by Walking In The Darkness 21 days ago


  • 6
    Replies
  • Responsive menu

    By Glenn Philp

    responsive-menu

    How can I achieve an accordion menu for mobile (small) devices and a normal vertical nested menu for tablets (medium) and desktop (large) devices? I thought it was simply `data-responsive-menu="accordion medium-vertical"`, that didn't work though.

    Last Reply by karthic 14 days ago


Following

    No Content

Followers

My Posts


My Comments

You commented on Sven's post 11 days

Foundation does contain tools to achieve layout without (explicit) floating.I have used floats as

first - I don't know what grid system do you use,
second - I use old "float" based system and don't know "XY" system at all,
and lastly - I use Sass version so I was able to do sth like this:

#dashboard-off-canvas {

@include breakpoint(medium) {
@include grid-column;
@include grid-column-size(4);
}
// (...)
}

dashboard .off-canvas-content {

@include grid-column;

@include breakpoint(medium) {
@include grid-column-size(8);
}
(...)
}
so, as you can see I aplied grid starting from breakpoint where I want sidebar to be "in-canvas". If I remember (!) it did not work when I just applied classes to elements (instead using mixins) (but I may be wrong as well).Side note - I am actually more happy having this with the use of mixins as the code is more semantic.

You commented on Sven's post 11 days

@Sven, sure you can, you just need to set up off-canvas/in-canvas-for-medium container.
look at the code-pen example here:Foundation Off/In-Canvas

You commented on SD Mattos's post 20 days

Quickest solution: add class of "row" to .top-bar
<header>
<div class="top-bar row text-center">

     &lt;!-- (...) --&gt;

</div>
</header>
here's a link to codepen example with your menu:
Centered TopBar v.1
 
by default .row has a maximum width of 1200px
in this case on larger screen you will have no background color on the right and left side of TopBar 
If that's not what you want (if instead of this you want to visually have the same color from right to left side of page but TopBar content width limited to 1200px) wrap yout TopBar (div#top-bar-wrap) and apply background-color of .topbar to it
<header>
<div id="top-bar-wrap">
<div class="top-bar row text-center">

        &lt;!-- (...) --&gt;

  &lt;/div&gt;

</div>
</header>
codepen here:Centered TopBar v.1a
 

You commented on Sourg's post 20 days

Oooops. I am sorry, I missed the point, you are right, there is no overlay after resizing. I meant that off-canvas is working in my previous reply, Yes HTML of overlay 
<div class="js-off-canvas-overlay is-overlay-fixed is-visible is-closable"></div>
is only present in page source view when page is loaded in small and not when you resize down.
 
 

You commented on Sourg's post 21 days

I've looked at your pen and it works regardless of page being loaded on a small screen or on large and resized down.
 

You commented on Glenn Philp's post 21 days

First, apologise, I answered to quickly and now realised you wanted normal, open but vertical menu starting from medium. I thought it was to be normal horizontal, what basically would be dropdown,Looking into docs I cannot find a way how to do this except destroying accordion plugin starting from medium screen?
<ul id="my-menu" class="vertical menu accordion-menu">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
<ul class="vertical nested menu">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
<li><a href="#">Link 2.5</a></li>
<li><a href="#">Link 2.6</a></li>
</ul>
</li>
<!-- (...) -->
</ul>
and then JS:
$(document).foundation();

// Instantiate new accordion menu only if small screen
if (Foundation.MediaQuery.is('small only')) {
var elem = new Foundation.AccordionMenu($('#my-menu'));
}

// React to screen size change
$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){

// only when we move from small to bigger
if(newSize == "medium" &amp;&amp; oldSize == "small") {

    $('#my-menu').foundation('_destroy');
}

// only when we move back to small
// Instantiate accordion menu
if(newSize == "small" &amp;&amp; oldSize == "medium") {

var elem = new Foundation.AccordionMenu($('#my-menu'));
}
});

You commented on Nikolay 's post 21 days

oh, and:2. When? Any time you need to modify how something looks. You may create basic rules for all paragraphs in your code without using classes, just assigning rules to HTML element:
p {
color: black;
font-size: 1em;
}
and then, if you want some of your paragraphs to look different -> give them a class and create rules for this class:
.red-text {
color: red;
}

.large-text {
font-size: 2em;
}
and now you can use them in your HTML:
<p>This paragraph is black and has font size of 1em</p>
<p class="red-text">This paragraph is red and has font size of 1em</p>
<p class="large-text">This paragraph is black and has font size of 2em</p>
<p class="red-text large-text">This paragraph is red and has font size of 2em</p>

You commented on Nikolay 's post 21 days

@Nikolay, class is an HTML attribute that can be assigned to any HTML element, classes are technically optional attributes so you do not have to add them to your code (I mean HTML without classes will validate) but of course in such a case your page will look almost like a text document with some limited styling added by your web browser - so you want to use them.1. Where? - you place class attribute within opening tag of HTML element and assign some value (name of the class):HTML paragraph element:
<p>Some text goes here...</p>
with added class:
<p class="red-text">Some text goes here...</p>

of course at that moment visually you will not see any change, you need to create some rules for this specific class (that's what are they used for!), so in CSS file:
.red-text {
color: red;
}
now, you have rule created and class assigned to HTML element, this will work. The same class may be assigned to more than one element on the page:
<p class="red-text">This is a paragraph with red text</p>

<p>This paragraph has default text color</p>

<h1 class="red-text">This header will also be red</h1>
Of course if you use some CSS Framework, like e.g. Foundation, some rules for specific classes have already been created for you and you can just add them to your HTML elements and this wil work (without writing CSS rules), like for example this:
<p class="stat">This text will be enlarged because that's what built-in Foundation .stat class does</p>
…but nothing stops you from overwritting rules pre-defined by Foundation if you only want:
.stat {
font-size: 0.8em;
}
you can add more than one class to the same HTML element (separated by space):
<p class="red-text stat">As you can expect this paragraph has large AND red text</p>
 
 
 

You commented on Glenn Philp's post 22 days

Glenn, it seems you are mixing CSS classes with data attributes (for JS), there is no "data-medium-vertical" option, try this:
<ul class="vertical medium-horizontal menu" data-responsive-menu="accordion medium-dropdown">
<!-- (...) -->
</ul>

Posts Followed




Following

  • No Content

Followers

  • No Content