Menu icon Foundation

My Posts

  • 2
    Replies
  • Right and left off canvas menu

    By Lea

    off canvasmenu

    Hi, Is there a way to have a left and right off canvas menu? I have tried to implement both but it just disables one? Ideally I would like the top menu to the left in a mobile menu and a right slide out too for a subscribe form? Any help would be great

    Last Reply by Lea over 5 years ago


My Comments

Lea commented on Lea's post over 5 years

Great, thanks very much :)

Lea commented on David Kenzik's post over 5 years

@Rafi and @David

I have created a version of the accordion baked into the off-canvas menu. I haven't fully tested it yet but it is working progress. I also need to change the plus to a minus image on open state but the basic working principle is there. I have added my code.

Screenshots

Closed State Accordion in Off Canvas Menu
http://imgh.us/off_canvas_menu_accord_closed.png

Open State Accordion in Off Canvas Menu
http://imgh.us/off_canvas_menu_accord_open.png

Thanks

Lea

 <ul class="off-canvas-list">
        <li>
          <dl class="accordion" data-accordion>
            <dd>  
              <a href="#panel1" class="topics">Topics</a>      
                <div class="content" id="panel1">
                  <li class="links"><a href="#">DVD</a></li>
                  <li class="links"><a href="#">TV</a></li>
                  <li class="links"><a href="#">Blue-ray</a></li>

                </div>
            </dd>
          </dl>
        </li> 
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>

```Bespoke CSS


ul.off-canvas-list li a{background-color:#333;border-bottom:medium none;border-top:1px solid #262626}
ul.off-canvas-list li a:hover{background-color:#0D90B3}
ul.off-canvas-list li .links a{border-top:medium none!important;font-size:.9em;margin-top:-2em;line-height:2.2em}
ul.off-canvas-list li a.topics{background-image:url(../images/plus.png);background-position:right center;background-repeat:no-repeat}
.accordion .content.active{background-color:#0D90B3;display:block}
.accordion dd.active a{background-color:#0D90B3}

Posts Followed

  • 2
    Replies
  • Right and left off canvas menu

    By Lea

    off canvasmenu

    Hi, Is there a way to have a left and right off canvas menu? I have tried to implement both but it just disables one? Ideally I would like the top menu to the left in a mobile menu and a right slide out too for a subscribe form? Any help would be great

    Last Reply by Lea over 5 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Lea's post over 5 years

Great, thanks very much :)

You commented on David Kenzik's post over 5 years

@Rafi and @David

I have created a version of the accordion baked into the off-canvas menu. I haven't fully tested it yet but it is working progress. I also need to change the plus to a minus image on open state but the basic working principle is there. I have added my code.

Screenshots

Closed State Accordion in Off Canvas Menu
http://imgh.us/off_canvas_menu_accord_closed.png

Open State Accordion in Off Canvas Menu
http://imgh.us/off_canvas_menu_accord_open.png

Thanks

Lea

 <ul class="off-canvas-list">
        <li>
          <dl class="accordion" data-accordion>
            <dd>  
              <a href="#panel1" class="topics">Topics</a>      
                <div class="content" id="panel1">
                  <li class="links"><a href="#">DVD</a></li>
                  <li class="links"><a href="#">TV</a></li>
                  <li class="links"><a href="#">Blue-ray</a></li>

                </div>
            </dd>
          </dl>
        </li> 
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>

```Bespoke CSS


ul.off-canvas-list li a{background-color:#333;border-bottom:medium none;border-top:1px solid #262626}
ul.off-canvas-list li a:hover{background-color:#0D90B3}
ul.off-canvas-list li .links a{border-top:medium none!important;font-size:.9em;margin-top:-2em;line-height:2.2em}
ul.off-canvas-list li a.topics{background-image:url(../images/plus.png);background-position:right center;background-repeat:no-repeat}
.accordion .content.active{background-color:#0D90B3;display:block}
.accordion dd.active a{background-color:#0D90B3}

Posts Followed


Following

  • No Content

Followers

  • No Content