May 27, 2014

Weebly Tricks #51 - Responsive Toggle Menu

Posted by Domz at 5/27/2014

Responsive Toggle Menu for Weebly



I would like to share the latest CSS3 from dynamicdrive.com as of today. It is a small icon than can be clicked to show its content. It is almost similar to chrome's icon located on its top right. Additionally, this toggle menu is responsive and can be viewed on smaller screens by automatically adjusting its width to fit.








1. Before anything else, the CSS code is too long for this post (I hate to post too long), so i decided to use external CSS and you too. Simply right click on the CSS file below and choose "save link as".

togglemenu.css

Upload it to you template by going to Weebly > Design > Edit CSS/ HTML > Add new files > select togglemenu.css on your computer > save changes.

2. This is a pure CSS3 so you don't need a JavaScript. To start with, decide where you put this tricks whether on solo page, page of same layout or show on the whole site. Check "3 Ways in Editing Weebly's <head>" to know more.

3. Assuming you've decided to put this on a single page then go to Weebly > PAGES > choose the page title on the left > click advance settings on the right > on the header code box, paste the following code:

<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/togglemenu.css">

Just change the red marked text with your own website address to point the file you uploaded on step 1. After that, click the "save and edit" button.

4. You are now on the page working area, drag an "embed code" element from the left and inside it paste the following codes:

<div class="iconicmenu">
<input type="checkbox" id="togglebox" />
<ul>
<li><a href="http://www.myweeblytricks.com">Home</a></li>
<li><a href="http://myweeblytricks.com/search/label/Basic%20and%20News?max-results=6">Basic</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Text%20Animations?max-results=6">Text</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Scrollers?max-results=6">Scroller</a></li>
<li><label for="togglebox"></label></li>
</ul>
<label class="toggler" for="togglebox">Menu</label>
</div>

On my example above, I used five tabs for my menu, so you need to edit your own. Simply change the following, five of them. The green is for your tab title and the blue is the link for that specific title.

Save and publish your site and your done. You've just made an awesome responsive toggle menu for your site!

Is this post helpful?

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

8 comments:

  1. How do you change the menu position in the css? I would like in in the middle of the page on the left side. Thanks!

    ReplyDelete
    Replies
    1. Hi Xargy, let me see your site or photo where you want to insert it.

      Delete
    2. I would like it (on top of everything) on the left center of my site. Thank you! smartnotion.weebly.com

      Delete
    3. I don't get it. Top of everything but on the left center? Since its just an HTML on page, then you can insert anywhere.

      Delete
    4. I would like to be sticky in the middle left exacly oposite of facebook. Where do I put the code?
      Thank you!!!

      Delete
    5. Hi Xargy,
      Please add me to your site editor, domz3669@yahoo.com.ph. I will edit it.

      Delete
  2. Hi Domingo,

    Thank you for posting this. How to make the content slide from right > to left?
    I am positioning the iconic menu to the right.
    http://gradschooltestprep.weebly.com/

    Thank you!

    ReplyDelete
    Replies
    1. Hi Josh,

      I didnt create the code but i'll play with and see what I can.

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top