Menu icon Foundation

My Posts





  • 2
    Replies
  • Mixins for topbar color

    By Alejandro

    color topbar button hover

    Hi there, i was wondering if there´s a way to make mixins for topbar colors, like buttons. I´ve managed to make 9 different buttons color. Using: @include button($bg:$whatevercoloryouwant), thanks to foundation this part was easy, the hover state works... (continued)

    Last Reply by Alejandro over 4 years ago



My Comments

Alejandro commented on Jay Todtenbier's post almost 3 years

Thank so much, worked like a charm :)
Why did it happen, i´ve just downloaded F 6.3, shouldn´t be there in app.scss file already ?
regards

Alejandro commented on Jay Todtenbier's post almost 3 years

the same happens to me, don´t know why :(
 

Alejandro commented on Dalyn Newby's post over 3 years

Try this: 
<script>
$(document).foundation();
$('#example-tabs').on('change.zf.tabs', function() {
Foundation.reInit('equalizer');
});
</script>
in this case i was using tabs and equalizer inside, so thi thening is you must call the main container id where the equalizer is in.
Hope it helps :)
regards

Alejandro commented on Alejandro's post over 3 years

yes, i´m using the sass version, i know i can change that item, but didn´t want to, because i´m trying to not change the settings file so much, i was wondering if someting went wrong in the update.
thanks

Alejandro commented on Alejandro's post over 3 years

thank you very much for the reply, i´m afraid it didn´t work, and i think it´s because the main content, on the left side of the menu, load the info dinamically, so the sticky part, doesn´t know where´s the if="footer", so won´t stop right there. Is it possible ?
regards

Alejandro commented on Shane Sheppard's post over 3 years

I use this:

<div class="top-bar-right">
<ul class="menu dropdown">
  <li class="mega-menu"><a data-toggle="institucional"><span class="txt-white">INSTITUCIONAL<br> <small class="light"> Autoridades, Misión<br>Objetivos y Servicios</small></span></a>
    <div class="mega dropdown-pane bottom sombra-1 sombra-1" id="institucional" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">


<div class="expanded row">
              <div class="small-3 columns"> 
                <h4>Información institucional</h4>
                <ul class="no-bullet">
                  <li><a href="/mision.htm">Misión, visión y valores</a></li>
                    <li><a href="/origen.htm">Origen y proyección del INTI</a></li>
                  <li><a href="/auto.htm">Autoridades</a></li>
                  <li><a href="/convenios.htm">Convenios firmados con otras instituciones</a></li>
                   <li><a href="/contrataciones/">Contrataciones</a></li>


                </ul>
              </div>
              <div class="small-3 columns"> 
                <h4>Servicios</h4>
                <ul class="no-bullet">
                    <li><a href="/oferta/">Oferta de servicios</a></li>
                    <li><a href="/contrataciones/">Guía de trámites</a></li>
                    <li><a href="http://www-biblio.inti.gov.ar/">Biblioteca</a></li>
                </ul> 
              </div>
              <div class="small-3 columns end"> 
               <h4>Donde estamos</h4>
                <ul class="no-bullet">
                 <li><a href="/INTIpais.htm">INTI en el país</a></li>
                  <li><a href="/centros.htm">Centros</a></li>
                  <li><a href="/unidades_extension.htm">Unidades de Extensión</a></li>
                  <li><a href="/oficinas_tecnicas.htm">Oficinas de información</a></li>
                </ul> <!--   <h4>Biblioteca</h4>
                <ul class="no-bullet">

                 <li><a href="boletinbibliografico/index.php">Boletín bibliográfico</a></li>
                </ul>-->
              </div>

             <!--     <div class="small-3 columns"> 
              <h4>Servicios</h4>
                <ul class="no-bullet">
                    <li><a href="oferta/">Oferta de servicios</a></li>
                </ul>
              </div>-->
</div>


    </div>
  </li>
</div>
.mega-menu{
  padding: .5rem 1.3rem .7rem;
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-color: $institucional;
  &:hover{
    background-color: scale-color($button-background, $lightness: -15%);
  }
  z-index:0;
  .mega{
    width: 100%;
    max-width: 85rem;
    margin: 0 auto !important;
    left: 0% !important;
    right: 0% !important;
  }
}

Alejandro commented on PHILL's post over 3 years

This is an example i´ve been using, notice that it´s align-right, and for Foundation 6.1.2

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div class="top-bar" id="example-menu">
        <div class="top-bar-left">
          <ul class="menu">
            <li class="menu-text"><span class="txt-white">Instituto Nacional de Tecnología Industrial</span></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul id="site-menu" class="medium-horizontal menu align-right" data-responsive-menu="drilldown medium-dropdown">
          <li class="has-submenu">
                <a href="#"><span class="txt-white">Participan</span></a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Centro Entre Ríos</a></li>
                  <li><a href="#">Centro Córdoba</a></li>
                  <li><a href="#">Centro Santa Fé</a></li>
                </ul>
              </li>
            <li  class="has-submenu">
                <a href="#"><span class="txt-white">Otros Noticieros</span></a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Noticiero Centro</a></li>
                  <li><a href="#">Noticiero Mar y Sierra</a></li>
                  <li><a href="#">Noticiero Cuyo</a></li>
                  <li><a href="#">Noticiero NOA</a></li>
                  <li><a href="#">Noticiero NEA</a></li>
                </ul>
              </li>

            <li><a href="../"><span class="txt-white"> <i class="fi-home"></i> Inicio</span></a></li>              
          </ul>
        </div>
      </div>
// FLECHAS
.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
    transform: rotate(90deg);
    margin-top: .5rem;
}
.dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after{
  margin-top: .3rem;
}
.dropdown.menu:not(.vertical) .is-dropdown-submenu.first-sub {
    top: 100%;
    left: auto;
    right: 0;
}
#site-menu>li {
    @include breakpoint(small only) { 
      display: block;
    }
}
.menu.align-right>li {
    @include breakpoint(small only) { 
     float: inherit !important;
    }
}

Alejandro commented on Rafi Benkual's post over 3 years

hi there, just installed a clean foundation 6.2 project in order to test the new things, so i´m following the upgrade steps.
I´ve made the gulp-babel installation via npm.
Created a ".babelrc" file with the content inside in my root project directory.
But i´m afraid i can´t find a "gulpfile.js" with this content inside:

gulp.task('javascript', function() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel()) // <-- There it is!
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});

so i can paste the ".pipe($.babel()) // <-- There it is!" line

regards and thanks in advance

Alejandro commented on Markus Lind's post almost 4 years

Hello there, i´m afriad i don´t have the solution to your answer, but you´ve given me the solution to my problem, make a mega-menu in F6. Can i ask you a few question, i was wondering what does it do the class "mega-menu" and "mega". Thank you in advance m8.
regards

Alejandro

Alejandro commented on Alejandro's post over 4 years

well, i´ve done something like this so far:
```SASS

$estado : hsl(206,64%,65%);//#6CADDF

.color-scheme-estado {
@include colour-scheme($estado, $estado, $estado);
a:hover{color:darken($estado, 20%)}
.btn-estado {
@include button-style($bg:$estado);
}
}
```

worked like a charm, but i need to make a custom top-bar, in fact 9 custom top-bars, with different colors each. That means making different hover states and so on, i don´t know if there´s a way around to make it in mixin or do i have to make it in CSS manually.

regards

Posts Followed

  • 4
    Replies
  • F6.3 Cards Styling Missing?

    By Jay Todtenbier

    f6.3card

    I copied the example code verbatim from the documentation. There does not appear to be any card-related css being applied. For example there are no background colors, padding or dividing lines. However, the responsive menu and grid appear to be working co... (continued)

    Last Reply by Guy Van Bael almost 3 years ago






  • 7
    Replies
  • Foundation 6.x Top Bar Responsive Menu

    By PHILL

    6top barmenu

    Hello, I have build a responsive menu following the instructions here https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6 The responsive bar works, but not the way I had hoped, in short I am looking for more of a v5 look: The resp... (continued)

    Last Reply by miss ziva over 1 year ago



  • 1
    Reply
  • F6 Dropdown Positioning

    By Nathan

    sitesdropdownjavascript

    I have a dropdown that I have positioned to 'bottom' which is working fine, but I want to control the positioning to be either centered on the parent element (similar to how action sheets work in Foundation for Apps). Alternatively (or in addition) I coul... (continued)

    Last Reply by Nathan almost 4 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Jay Todtenbier's post almost 3 years

Thank so much, worked like a charm :)
Why did it happen, i´ve just downloaded F 6.3, shouldn´t be there in app.scss file already ?
regards

You commented on Jay Todtenbier's post almost 3 years

the same happens to me, don´t know why :(
 

You commented on Dalyn Newby's post over 3 years

Try this: 
<script>
$(document).foundation();
$('#example-tabs').on('change.zf.tabs', function() {
Foundation.reInit('equalizer');
});
</script>
in this case i was using tabs and equalizer inside, so thi thening is you must call the main container id where the equalizer is in.
Hope it helps :)
regards

You commented on Alejandro's post over 3 years

yes, i´m using the sass version, i know i can change that item, but didn´t want to, because i´m trying to not change the settings file so much, i was wondering if someting went wrong in the update.
thanks

You commented on Alejandro's post over 3 years

thank you very much for the reply, i´m afraid it didn´t work, and i think it´s because the main content, on the left side of the menu, load the info dinamically, so the sticky part, doesn´t know where´s the if="footer", so won´t stop right there. Is it possible ?
regards

You commented on Shane Sheppard's post over 3 years

I use this:

<div class="top-bar-right">
<ul class="menu dropdown">
  <li class="mega-menu"><a data-toggle="institucional"><span class="txt-white">INSTITUCIONAL<br> <small class="light"> Autoridades, Misión<br>Objetivos y Servicios</small></span></a>
    <div class="mega dropdown-pane bottom sombra-1 sombra-1" id="institucional" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true; vOffset:11">


<div class="expanded row">
              <div class="small-3 columns"> 
                <h4>Información institucional</h4>
                <ul class="no-bullet">
                  <li><a href="/mision.htm">Misión, visión y valores</a></li>
                    <li><a href="/origen.htm">Origen y proyección del INTI</a></li>
                  <li><a href="/auto.htm">Autoridades</a></li>
                  <li><a href="/convenios.htm">Convenios firmados con otras instituciones</a></li>
                   <li><a href="/contrataciones/">Contrataciones</a></li>


                </ul>
              </div>
              <div class="small-3 columns"> 
                <h4>Servicios</h4>
                <ul class="no-bullet">
                    <li><a href="/oferta/">Oferta de servicios</a></li>
                    <li><a href="/contrataciones/">Guía de trámites</a></li>
                    <li><a href="http://www-biblio.inti.gov.ar/">Biblioteca</a></li>
                </ul> 
              </div>
              <div class="small-3 columns end"> 
               <h4>Donde estamos</h4>
                <ul class="no-bullet">
                 <li><a href="/INTIpais.htm">INTI en el país</a></li>
                  <li><a href="/centros.htm">Centros</a></li>
                  <li><a href="/unidades_extension.htm">Unidades de Extensión</a></li>
                  <li><a href="/oficinas_tecnicas.htm">Oficinas de información</a></li>
                </ul> <!--   <h4>Biblioteca</h4>
                <ul class="no-bullet">

                 <li><a href="boletinbibliografico/index.php">Boletín bibliográfico</a></li>
                </ul>-->
              </div>

             <!--     <div class="small-3 columns"> 
              <h4>Servicios</h4>
                <ul class="no-bullet">
                    <li><a href="oferta/">Oferta de servicios</a></li>
                </ul>
              </div>-->
</div>


    </div>
  </li>
</div>
.mega-menu{
  padding: .5rem 1.3rem .7rem;
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-color: $institucional;
  &:hover{
    background-color: scale-color($button-background, $lightness: -15%);
  }
  z-index:0;
  .mega{
    width: 100%;
    max-width: 85rem;
    margin: 0 auto !important;
    left: 0% !important;
    right: 0% !important;
  }
}

You commented on PHILL's post over 3 years

This is an example i´ve been using, notice that it´s align-right, and for Foundation 6.1.2

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div class="top-bar" id="example-menu">
        <div class="top-bar-left">
          <ul class="menu">
            <li class="menu-text"><span class="txt-white">Instituto Nacional de Tecnología Industrial</span></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul id="site-menu" class="medium-horizontal menu align-right" data-responsive-menu="drilldown medium-dropdown">
          <li class="has-submenu">
                <a href="#"><span class="txt-white">Participan</span></a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Centro Entre Ríos</a></li>
                  <li><a href="#">Centro Córdoba</a></li>
                  <li><a href="#">Centro Santa Fé</a></li>
                </ul>
              </li>
            <li  class="has-submenu">
                <a href="#"><span class="txt-white">Otros Noticieros</span></a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Noticiero Centro</a></li>
                  <li><a href="#">Noticiero Mar y Sierra</a></li>
                  <li><a href="#">Noticiero Cuyo</a></li>
                  <li><a href="#">Noticiero NOA</a></li>
                  <li><a href="#">Noticiero NEA</a></li>
                </ul>
              </li>

            <li><a href="../"><span class="txt-white"> <i class="fi-home"></i> Inicio</span></a></li>              
          </ul>
        </div>
      </div>
// FLECHAS
.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
    transform: rotate(90deg);
    margin-top: .5rem;
}
.dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after{
  margin-top: .3rem;
}
.dropdown.menu:not(.vertical) .is-dropdown-submenu.first-sub {
    top: 100%;
    left: auto;
    right: 0;
}
#site-menu>li {
    @include breakpoint(small only) { 
      display: block;
    }
}
.menu.align-right>li {
    @include breakpoint(small only) { 
     float: inherit !important;
    }
}

You commented on Rafi Benkual's post over 3 years

hi there, just installed a clean foundation 6.2 project in order to test the new things, so i´m following the upgrade steps.
I´ve made the gulp-babel installation via npm.
Created a ".babelrc" file with the content inside in my root project directory.
But i´m afraid i can´t find a "gulpfile.js" with this content inside:

gulp.task('javascript', function() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel()) // <-- There it is!
.pipe($.concat('app.js'))
.pipe(uglify)
.pipe($.if(!isProduction, $.sourcemaps.write()))
.pipe(gulp.dest('dist/assets/js'))
.on('finish', browser.reload);
});

so i can paste the ".pipe($.babel()) // <-- There it is!" line

regards and thanks in advance

You commented on Markus Lind's post almost 4 years

Hello there, i´m afriad i don´t have the solution to your answer, but you´ve given me the solution to my problem, make a mega-menu in F6. Can i ask you a few question, i was wondering what does it do the class "mega-menu" and "mega". Thank you in advance m8.
regards

Alejandro

You commented on Alejandro's post over 4 years

well, i´ve done something like this so far:
```SASS

$estado : hsl(206,64%,65%);//#6CADDF

.color-scheme-estado {
@include colour-scheme($estado, $estado, $estado);
a:hover{color:darken($estado, 20%)}
.btn-estado {
@include button-style($bg:$estado);
}
}
```

worked like a charm, but i need to make a custom top-bar, in fact 9 custom top-bars, with different colors each. That means making different hover states and so on, i don´t know if there´s a way around to make it in mixin or do i have to make it in CSS manually.

regards

Posts Followed

Following

  • No Content

Followers

  • No Content