Shape 5

Joomla Templates => User Choice - August 2007 - Club => : webpartner September 15, 2007, 01:17:55 PM



: help using the slide out menu
: webpartner September 15, 2007, 01:17:55 PM
I'm starting a site using the "User Choice" template and I want to use the slider menu... However, I don't want a tab hanging down over my masthead like a uvula. I really like the way you have a solid bar across the top of the demo page where it says "open/close navigation"... It looks like a variation of the same script and I'd like to do it exactly like that. How would I go about it...?
Thanks,
Bob


: Re: help using the slide out menu
: mikek September 15, 2007, 04:04:33 PM
Bob,

I'm not quite sure I understand what you're asking for. Are you trying to move the drop down menu to the very top of the page where the open/close tab is?

Let me know,


: Re: help using the slide out menu
: webpartner September 15, 2007, 05:51:24 PM
Mike,


Thanks for your response...

No, I'm not trying to move anything...

What I want is the open/close tab itself...
The straight light blue line with open/close on it.

I just looked at the page source and it doesn't appear to be a script...
It looks more like css with a table layout that you're using to hide and reveal the navagation bar... It looks good and works well on your demo page...

I'd rather use that than the slide out menu because I don't want the tab in the middle of the masthead which will be in the top mod (with user 1 & 2 collapsed) and stretch across the entire top of the page. But, that straight line with nothing except open/close on it would work fine...

Bob


: Re: help using the slide out menu
: mikek September 15, 2007, 07:22:27 PM
Bob,

You will have to edit the css to do this. If you are using the light theme edit light.css and dark.css if you are using the dark theme.

Find:

#s5_drop_down_tab {
     z-index: 2;
     position: absolute;
     height: 23px;
     width: 180px;
     cursor: pointer;
     text-align: center;
     margin: 0px auto;
     background: url(../images/light/s5_drop_down_tab.gif) no-repeat;
     background-position: bottom center; }

and replace with:

#s5_drop_down_tab {
     z-index: 2;
     position: absolute;
     height: 23px;
     width: 100%;
     cursor: pointer;
     text-align: center;
     margin: 0px auto;
     background: url(../images/light/s5_drop_down_tab.gif) no-repeat;
     background-position: bottom center; }

Depending on what you want the background to look like you will need to edit the following from above:

     background: url(../images/light/s5_drop_down_tab.gif) no-repeat;

for a picture:

     background: url(../images/light/picture.gif) repeat-x;

or for a color:

     background: #0000ff;   (change with whatever color you would like)

Then in template_css.css

find:

#s5_open {
     margin: 0px auto;
     cursor: pointer;
     font-weight: bold;
     display: block;
     text-align: center;
     font-size: 11px;
     width: 174px;
     padding-top: 3px;
     visibility: visible;
     font-family: Verdana, Arial, Helvetica, sans-serif;}

#s5_closed {
     margin: 0px auto;
     font-weight: bold;
     padding-top: 3px;
     cursor: pointer;
     text-align: center;
     display: none;
     width: 174px;
     font-size: 11px;
     visibility: hidden;
     font-family: Verdana, Arial, Helvetica, sans-serif;}

and replace with:

#s5_open {
     margin: 0px auto;
     cursor: pointer;
     font-weight: bold;
     display: block;
     text-align: center;
     font-size: 11px;
     padding-top: 3px;
     visibility: visible;
     font-family: Verdana, Arial, Helvetica, sans-serif;}

#s5_closed {
     margin: 0px auto;
     font-weight: bold;
     padding-top: 3px;
     cursor: pointer;
     text-align: center;
     display: none;
     font-size: 11px;
     visibility: hidden;
     font-family: Verdana, Arial, Helvetica, sans-serif;}


And then finally in the index.php file find:

document.getElementById("s5_drop_down_tab").style.left = ((document.documentElement.clientWidth/2) - 90) + 'px';

and delete it, it's towards the bottom.

Hope that helps!


: Re: help using the slide out menu
: webpartner September 16, 2007, 12:15:45 PM
Michael... that was great!

You gave me just what I needed and pointed me in the right direction for the script modifications that I want to make. Your suggestions did exactly what I wanted to do...

It's been a while since I did much with css & php but when I started making the changes that you suggested and looking around to change the height & font & alignment, etc... It all started coming back to me...

I've got a few other questions & things I'd like to discuss with you but I'll save those for now...
Since today is the 16th I figure you guys are pretty busy getting the September template published so I'll leave you alone for awhile 'cause I'm looking forward to seeing what you guys came up with for this month.

Thank you for your help!
Bob