WEB css sliding doors menu in drupal

Discussion in 'OT Technology' started by jizzmo, Oct 2, 2008.

  1. jizzmo

    jizzmo New Member

    Joined:
    Jul 9, 2008
    Messages:
    1,336
    Likes Received:
    0
  2. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    drupal 6.4 has jquery 1.2.6 built in.. there's probably a jquery plugin for that
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,923
    Likes Received:
    11
    Location:
    Los Angeles
    You can first do it by styling your CSS elements correctly. Once that's done, you have to modify your HTML structure, but in order to do that you need to tap into Drupal's API theme_ functions. The function to modify for this is: theme_menu_item. If you need to modify specifically what's within the anchor tags, then you will need theme_model_item_link.

    Open up template.php in your theme directory and place the function inside there. Replace the "theme_" prefix with the name of your theme. This is an example of a theme override:

    Code:
    function [b]nameofmytheme[/b]_menu_item($mid, $children = '', $leaf = TRUE) {
      return '<li class="'. ($leaf ? 'leaf' : ($children ? 'expanded' : 'collapsed')) .'">'. menu_item_link($mid) . $children ."</li>\n";
    }
    
    From here, you can include the jQuery framework in your template files and write the code necessary to accomplish the "sliding doors" effect.

    If you don't know where to start, a good idea would be copying Drupal's existing menu mark-up into a separate file and creating the stand-alone menu. Once you know it works, then integrate it into Drupal.
     

Share This Page