Converting sandbox sidebar into tabs in the header with CSS

• 

  profista · Member · Sep 30, 2008 at 1:19 pm

  • Copy link
  • Add topic to favorites

  I’m trying to convert the pages section of sidebar 1 into a set of tabs that sit in the header with just CSS. I’m using Sandbox 1.0.

  First, I need to make the list of pages horizontal, and then I need to reposition them into the header.

  Is this possible without directly editing the HTML?

• 

  vivianpaige · Member · Sep 30, 2008 at 2:27 pm

  • Copy link

  There really is no need to do that in Sandbox 1.0. There is a menu there already and it uses the page information.

  If you insist on doing it the hard way, yes, it can be done. Take a look at the CSS on my blog as I did exactly that (with some help).

• 

  profista · Member · Sep 30, 2008 at 2:46 pm

  • Copy link

  How do I expose the menu already in the header?

• 

  vivianpaige · Member · Sep 30, 2008 at 2:52 pm

  • Copy link

  In the CSS editor, if you click on the CSS stylesheet link, you will see the example content, including this section:

  /* Just some example content */
  div#header{text-align:center;margin-bottom:2em;}
  div#access div.skip-link{position:absolute;top:1em;right:1em;}
  div#menu{font-size:0.9em;height:1.5em;padding-top:0.3em;background:#eee;width:100%;}
  div#menu ul a{font-weight:700;text-decoration:none;}
  div#menu ul,div#menu ul ul,div#menu ul li{list-style:none;margin:0;padding:0;}
  div#menu ul li{float:left;}
  div#menu ul li a{background:#eee;padding:0.3em 0.5em;}
  div#menu ul ul{display:none;}
  div#menu ul ul li{float:none;}
  div#menu ul ul li a{margin:0;padding:0;}
  div#menu ul li:hover ul{display:block;font-size:0.9em;padding-top:0.5em;position:absolute;}
  div#menu ul li:hover ul li a{background:#f5f5f5;border:none;display:block;padding:0.1em;width:10em;}

• 

  profista · Member · Sep 30, 2008 at 7:54 pm

  • Copy link

  Perfect. Thanks.

• 

  vivianpaige · Member · Sep 30, 2008 at 8:07 pm

  • Copy link

  Glad to help!