Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-18687

Ability to collapse site navigation

    XMLWordPrintable

    Details

    • Type: Feature Request
    • Status: CLOSED
    • Priority: Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.8.0
    • Component/s: Portal
    • Labels:
      None
    • Property addition/change required:
      Yes

      Description

      This came up on list, the ability to collapse the side menu. I remarked that it would be nice to be able to collapse the side navigation so only the icons are visible.

      Heres one possible solution from Gonzalo:

      --------
      In your tool add the following:

      <script type="text/javascript" src="/library/js/jquery.js"></script>
      <script type="text/javascript">
      $(document).ready(function() {
      $('#toggleToolMenu').toggle(function(e){
      e.preventDefault();
      $('#toolMenuWrap', window.parent.document).css(

      {'width':'2px','overflow':'hidden'}

      );
      $('#content', window.parent.document).css(

      {'margin-left':'1em'}

      );
      }, function(e) {
      e.preventDefault();
      $('#toolMenuWrap', window.parent.document).css(

      {'width':'11em'}

      );
      $('#content', window.parent.document).css(

      {'margin-left':'12.3em'}

      );

      });
      });
      </script>

      <a id="toggleToolMenu" href="#">Toggle full width</a>

      This should work in 2.6 - the above measurements assume the default Sakai skin - you will need to adjust for your case.
      --------

      However, for those that do adjust the skin, this requires some work to get right, for instance we have our icons on the left, not the right.
      So I propose that a separate div be created at render time that contains only the icons from the toolmenu and when the 'collapse' function is required, it replaces the full navigation div with the smaller one. This should cater for all cases where people adjust the toolmenu.

        Gliffy Diagrams

          Attachments

          1. style regression.png
            style regression.png
            10 kB
          2. sakai-nav-min.png
            sakai-nav-min.png
            43 kB
          3. sakai-nav-max.png
            sakai-nav-max.png
            47 kB
          4. safari-oops.png
            safari-oops.png
            17 kB
          5. nav-collapse-menu-pane.gif
            nav-collapse-menu-pane.gif
            6 kB
          6. left-icons.png
            left-icons.png
            22 kB
          7. HomeLinkMissing.png
            HomeLinkMissing.png
            87 kB
          8. expand-menu.jpg
            expand-menu.jpg
            21 kB
          9. default.png
            default.png
            19 kB
          10. collapsed-menu.jpg
            collapsed-menu.jpg
            13 kB
          11. Collapsed_navigation_SAK-18687_2-7-1.rar
            11 kB
          12. blackboard-collapsed.png
            blackboard-collapsed.png
            11 kB

            Issue Links

              Activity

                People

                • Assignee:
                  csev Charles Severance
                  Reporter:
                  steve.swinsburg Steve Swinsburg
                • Votes:
                  1 Vote for this issue
                  Watchers:
                  8 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Git Source Code