Results 1 to 2 of 2

Thread: Multiple off-canvas menu

  1. #1
    Join Date
    May 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Multiple off-canvas menu

    Hi

    I would like to know if there is a way using http://www.javascriptkit.com/dhtmltu...nvasmenu.shtml to get two off-canvas menu, one on top and one on left. The idea is to create an admin panel with 2 a panel on left and a panel on top, both toggle at the same time by clicking a button. It should push the main content right-bottom.

    Any help would be appreciated

    Greg

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    It's a pretty comprehensive tutorial that explains, very well, how the "checkbox hack" can be used to style sibling elements when checked; in this case, shifting the position of a menu and container div with CSS property transform:translate3d(x, y, z);

    Try following the tutorial in a test page but manipulate the translate3d values so that the positioning/movement happens along the y axis instead of the x axis. You will probably want to change some classes and ids so that they relate more to a "top-down" menu.

    You can read more about translate3d here http://tympanus.net/codrops/css_reference/translate3d/
    And you can read more about the checkbox hack here https://css-tricks.com/the-checkbox-hack/

    When you have your "top-down" test menu setup and working properly, try combining the two menus in one page.

    Post back if you need help with various stages, providing links to your reduced case demo pages and your work so far.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. What stops a drop-down menu from disappearing under the slideshow canvas?
    By fritzwilliam in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-12-2011, 02:57 AM
  2. canvas
    By mido911 in forum JavaScript
    Replies: 0
    Last Post: 12-27-2010, 04:32 PM
  3. Photoshop - zooming and the canvas.
    By jlizarraga in forum Computer hardware and software
    Replies: 2
    Last Post: 09-20-2008, 12:23 AM
  4. Replies: 1
    Last Post: 08-02-2008, 02:04 AM
  5. Help with javascript & <canvas> tag.
    By newshound in forum JavaScript
    Replies: 6
    Last Post: 07-29-2008, 03:57 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •