CSS Sliding Doors – In SAP EP!

In this article, I want to share the CSS “Sliding Doors” technique by providing the code.  Also, I want to share a way in which this was implemented successfully into SAP EP in order to control the look and feel of the first level top navigation (tabs).

Basic Idea

First of all, the sliding door technique using CSS is quite simple, really.   It allows for layering of background images, allowing them to slide over each other to obtain certain effects.  A great example of this is the tab navigation in SAP EP.  Using CSS sliding doors, we can not only give the tabs a new look and feel, but we can also give them rounded corners.  Lets look at the basic concept first:

Basically, to achieve this effect, you create two images – a “left” image, or end cap, and a “right” image, which is longer in length, and will “slide” in the background to allow for expanding text and tabs.  Here are my two images:

                           
Left image                                             Right Image

Basically, we will need to use CSS to allow for this look and feel.  I have named my two images above as follows:

- Left image = left.gif
- Right image = right.gif (for those of you curious, it is 300 pixels in length to accommodate SAP EP tabs)

Both images are GIFs with corner transparency, allowing for the tabs to look good on top of any background.  For my SAP EP project, this was a must, as we need to support IE 6 and 7 (so no PNGs), and we have a graphical banner behind the tabs.

Next, we implement the CSS as follows:

div.cssbutton { overflow: hidden; width: 100%; }

div.cssbutton a { background: transparent url(‘/images/left.gif’) no-repeat top left; display: block; float: left; font: bold 12px Arial; line-height: 13px; height: 17px; padding-left: 8px; text-decoration: none; }

div.cssbutton a:link, div.cssbutton a:visited, div.cssbutton a:active { color: #FFF; }

div.cssbutton a span { background: transparent url(‘/images/right.gif’) no-repeat top right; display: block; padding: 2px 8px 2px 0; }

div.cssbutton a:hover { background-position: bottom left; text-decoration: none; }

div.cssbutton a:hover span { background-position: bottom right; color: black; text-decoration: none; }

 

Then, with some simple mark-up below, we can have the CSS take effect and create our sliding door.

And there you have it!  A result like this:

For more, you can follow this link.

Implementation into SAP EP

To implement into SAP EP, a couple of things need to change.  Since SAP EP has a “selected” state of a tab, as well as an “unselected” state of a tab, we need to change the CSS a little bit to allow for both states.  Please keep in mind that would mean creating four images:  A left and right image for the selected tab, and a left and right image for the unselected tab.  So we have to create separate CSS classes for these. The CSS would look like this: (notice we defined the images earlier in the SAP EP code, so we do not directly reference them in the CSS)

div.cssbutton-sel { overflow: hidden; width: 100%; }

div.cssbutton-sel a { background: transparent url(‘<%=selLeftCap%>‘) no-repeat top left; display: block; float: left; font: bold 11px Arial; line-height: 14px; height: 18px; padding-left: 11px; text-decoration: none; }

div.cssbutton-sel a:link, div.cssbutton a:visited, div.cssbutton a:active, a:visited { color: #FFF; }

div.cssbutton-sel a span { background: transparent url(‘<%=selRightCap%>‘) no-repeat top right; display: block; padding: 2px 8px 2px 0; }

div.cssbutton-sel a:hover { background-position: bottom left; text-decoration: none; color:#FFF; }

div.cssbutton-sel a:hover span { background-position: bottom right; text-decoration: none; color:#FFF; }

div.cssbutton { overflow: hidden; width: 100%; }

div.cssbutton a { background: transparent url(‘<%=unselLeftCap%>‘) no-repeat top left; display: block; float: left; font: bold 11px Arial; line-height: 14px; height: 18px; padding-left: 11px; text-decoration: none; }

div.cssbutton a:link, div.cssbutton a:visited, div.cssbutton a:active, a:visited { color: #FFF; }

div.cssbutton a span { background: transparent url(‘<%=unselRightCap%>‘) no-repeat top right; display: block; padding: 2px 8px 2px 0; }

div.cssbutton a:hover { background-position: bottom left; text-decoration: none; color: #C6EBFF; }

div.cssbutton a:hover span { background-position: bottom right; text-decoration: none;  color: #C6EBFF; }

 

Next, we need to alter the SAP EP code a little bit to allow for these CSS styles to take effect.  That code looks something like this: 

<div class=“cssbutton-sel”>

                                    <nav:navNodeAnchor navigationMethod=“byURL” urlParameters=“InitialNodeFirstLevel=true” title=“”>

                                          <span><nav:navNodeTitle/></span>

                                    </nav:navNodeAnchor>

                              </div>

                        </TD>          

                        <nav:storeNavNode/>            

                  </nav:ifNavNodeInSelectedPath>

                  <nav:ifNotNavNodeInSelectedPath>

                        <TD>

                              <div class=“cssbutton”>

                                    <nav:navNodeAnchor navigationMethod=“byURL” urlParameters=“InitialNodeFirstLevel=true” title=“”>

                                          <span><nav:navNodeTitle/></span>

                                    </nav:navNodeAnchor>

                              </div>

 

Make sure you take note of the use of both a span tag as well as a div tag to achieve the desired effect.

And there you have it!

Final Result:

You can click on the image for a full size shot.