Horizontal Sliding Panels with 100% width

Hi,
Im trying to use horizontal sliding panels with a width of 100% for an expandable website. So far i got it working with the vertical sliding panles where if i increase the width of the site the sliding panels width increases as well, but how do i get them to float left and slide horizontally, if i change the slidingpanelscontentgroup width it messe up. so far here is the css:
.SlidingPanelsP {
width: 100%;
position: relative;
height: 300px;
padding: 0px;
border: none;
.SlidingPanelsContentGroupP {
width: 100%;
position: relative;
margin: 0px;
padding: 0px;
min-height:0;
border: none;
.SlidingPanelsContentP {
float: left;
width: 100%;
height: 300px;
overflow: hidden;
margin: 0px;
padding: 0px;
border: none;
.SlidingPanelsAnimatingP * {
overflow: hidden !important;
.SlidingPanelsCurrentPanelP {
Thanks in advance

Had a hard time find the solution, but this seem to work in major browsers, except Opera which does not like the 33.33% width apparently and shows a bit of next panel. You may be able to play with margin or padding to correct this behavior.
You have to know the number of panels and make the calculation of the SlidingPanelsContent class width accordingly. Here's my test page and code for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script language="javascript" type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<style>
#slidingPanel_1 {
    height: 200px;
.SlidingPanelsContentGroup {
    width: 300%;
.SlidingPanelsContent {
    height: 200px;
    float: left;
    width: 33.33%;
#content1 { background: yellow; }
#content2 { background: red; }
#content3 { background: green; }
</style>
</head>
<body>
<a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
<a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
<div id="slidingPanel_1" class="SlidingPanels">
     <div class="SlidingPanelsContentGroup">
        <div id="content1" class="SlidingPanelsContent">The Content 1</div>
        <div id="content2" class="SlidingPanelsContent">The Content 2</div>
        <div id="content3" class="SlidingPanelsContent">The Content 3</div>
     </div>
</div>
<script language="javascript" type="text/javascript">
   var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
</script>
</body>
</html>

Similar Messages

Horizontal Sliding Panels flicker IE

Hello
I'm using the horizontal Sliding Panel to slide some Images
and text. It works fine with Safari on Mac, but with IE and Firefox
on Windows the animation isn't very smooth (the problem concerns
only the image, the text-sliding works fine). With the vertical
Sliding Panels I don't have this problem...
Can anyone help me? Thanks

solaris23 wrote:
> Hello Danilo
>
> Horizontal:
http://www.miomedia.ch/test/SprySlidingPanels.html
> Vertical:
http://www.miomedia.ch/test/SprySlidingPanels2.html
>
> Look on the image in the horizontal slide, the animation
flickers on the left
> and right image-borders.
> In the vertical slide the animation is much smoother.
This probably has to do with the rendering of the moved
elements on the page and IE redrawing portions of the images at a
time during the slide. I'd suspect that the issue actually exists
in the vertical slide as well, but is minimized due to the angled
top and bottom of the images, but that's just a suspicion, not a
known fact. It seems that if I look closely enough at the animation
in Firefox it seems to be doing something similar, but it is indeed
a good bit smoother than IE.
> I'm using transparent png images, I've also tried with
jpg, with different
> duration time, different fps... but still the same
problem....
That would have been my suggestion too. A quick local copy of
your page and it seems that making the duration 1000 milliseconds
seems to help with moving left to right, but moving right to left
still has a little bit of flicker.
I tried making the images smaller and it seemed to be
lessened, so perhaps it's IE and the larger images rendering. You
might also try making the vertical lines of the screenshot to be a
bit less vertical, or perhaps add a shadow or glow to the image to
soften the hard vertical edge.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Setting Horizontal Menu widget to 100% width doesn't work

Hello, I'm trying to set a Horizontal Menu widget to 100% width within Muse so it spans across the browser, and it looks just fine while I'm editing it into Muse, but when I attempt to view it on any browser, I get a shorter menu, floating to the left of the screen. Does anyone know what could be wrong?
As you can notice in the attached screenshots, #1 is the Adobe Muse view, the menu's width is being scaled to the limit of the browser's view, and the Width setting clearly shows as "100%". In screenshot #2, is the exported site viewed on Google Chrome, with a smaller menu floating to the left.
I've been searching an answer for days, but can't find anyone with a similar issue. Any insights would be greatly appreciated!
(I have an ongoing project with this problem holding it back, I just remade it on a new, clean file to replicate the issue and get the screenshots you see here)
Thank you!

I think videos will be more helpful :
https://www.youtube.com/watch?v=rOggrg-svPs
https://www.youtube.com/watch?v=eQo_k9WiLms
http://tv.adobe.com/watch/muse-feature-tour/muse-design-for-flexible-browser-width/
Additionally, you can try to use the menu from muse library :
http://muse.adobe.com/Default.aspx?CCID=32494&FID=162755&ExcludeBoolFalse=True&PageID=1524 0812
Thanks,
Sanjit

Spry sliding panels with tab

Maybe I'm missing something but I've been stuck on this for a
long time. In one example of the spry sliding panel with tab there
are <li> elements for the menu like this...
<ul class="slidingTabPanel">
<li><a href="#" id="about" class="tabActive"
title="about"></a></li>
<li><a href="#" id="contact" class="tab"
title="contact"></a></li>
</ul>
and they should link to...
<div id="aboutPanel" class="p1"></div>
<div id="contactPanel" class="p2"></div>
with contents in each of those DIV
I just can't seem to get the buttons to do anything, how are
the <li> calling the panels?

Actually, I figured it out. I had to edit the sp_withTabs.js
file with the IDs as well, that's whats calling the CSS class.
My problem now is that everything is all good with 4 tabs,
but when I try to add another tab, no matter what path I set for
the background image state it always shows the image of the fourth
tab and not a new image.

Sliding panels with tabs

Hello again,
Is there some way to change the orientation of tabs to bottom
in this example: Sliding panels with tabs?
that's all folks,
morpheto

You need to look at the code in the load handler of this JS
file:
http://labs.adobe.com/technologies/spry/home_assets/spry_home.js
If you add a tab, you need to add it to the list of items to
select in this statement:
Spry.$$("#nutshell, #widgets, #data,
#effects").addEventListener("click", function(){
switchTab(this.id); return false; }, false);
--== Kin ==--

Sliding Panels Problem: Content panels with different width?

I'm trying to create the exact same behaviour as this Argentinian Photographer have done:
http://germansaezphoto.com/music/radiohead/
I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html
and searched the forum but couldn't find an answer.
I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.
Here is the div in the index file:
<div class="SlidingPanels" id="panelwidget">
<div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
<div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
</div>
</div><br />
<a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> |
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a>
<script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
And here is the classes in the css:
.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.
How do I solve this?

It seems to me that if you have all different width images, you will want to remove the width from the content pane. That should allow the images to butt up next to each other without either extra white space (for smaller images) or cropping (of larger images). Saenz's photos are in divs with a class of .panelfoto that has the definition of float: left; width: auto;
I have not played around a lot with sliding panels, but it seems reasonable to me that that would work.
You have probably already read and digested this page: http://labs.adobe.com/technologies/spry/articles/sliding_panels/index.html
You know, if you really want something very close to what the example site looks like, look into his code and imitate it.
It does not appear that every move of the pane goes the same distance, and I'm not sure what controls that, but I see some of his images moving part-way, exposing part of the next, and so forth, instead of a complete image change each time. Using different width photos will do that partly, of course.
Beth

Sliding panels with dynamic heights

Hello,
I'm currently working with sliding panels. When I resize my
panels, the panel indexing system in spry does not seem to conform.
Ie, if my panels are 100px high. As soon as I dynamically
change them to 50px, panel(1) is no longer the second panel but
rather the fourth.
It appears that spry retains heights of elements. Is there
something in SprySlidingPanels.js I can call for it to
'recalculate' the heights?
Thanks

I was wrong!
Spry is indeed clever and retains panel number.
Doh!

Sliding Panels with srollbar

Hello,
Is it possible to put a scrollbar on .SlidingPanels div
(assuming we use the following code:
<div id="apDiv1" class="SlidingPanels"
spry:region="ds1">
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1"><img src="./{image}" />
</div>
</div>
If i put overflow: auto; on it in my css nothing happens. The
SlidingPanelsContainer has fix height too and it is higher than
.SlidingPanels Div have.
PS: If i put it on SlidingPanelsContainer it works but the
navigation with Link (panel navigation with showPanel(index) )
bcause the requested panel is hidden beneath the
SlidingPanelsContainer.
Thank you in advance!

Hi originaliti,
Thank you for your reply. Already tried, that isn't working
either. By the way my idea was wrong. Even if i make it work that
is no good for me. You should ask why. Because if you slide the
rows with the links you won't be able to see the data before the
active row since it is hidden by the div which contains the
dataset, if you see what i mean.
this is the way how I get to this conclusion:
in the html:
<div class="scrollpanel" class="SlidingPanels" >
<div id="apDiv1" class="SlidingPanels" spry:region="ds1"
>
<div class="SlidingPanelsContainer">
<div id="p{ds_RowNumber}" class="SlidingPanelsContent"
spry:repeat="ds1"><img src="./{image}" />
</div>
</div>
</div>
in style sheet:
.SlidingPanels { width:620; height:8000em; overflow: scroll;
position: relative; padding: 0px; border: 1px solid yellow;
display: block;}
.scrollpanel {width: 620px; height: 354px; overflow: auto;
position:relative;}
.SlidingPanelsContainer { width:auto; height:8000em;
position: absolute; margin: 0px; padding: 0px; border: 3px solid
green; display:block;}
.SlidingPanelsContent {width: 625px; height: 230px; border:
2px dotted red; }
Anyway Thank you originalit again for the reply.
If any one have more idea than please post it!

Sliding panel horizontal scrollbar problem

Issue: This is about horizontal sliding panels.
I want to restrict the height on the sliding panel to say,
200px. Some of the panel content is longer than that. So I want a
scrollbar to appear vertically (overflow:auto). It does this.
However, when the panel with the scrollbar slides off to the left,
its scrollbar remains present at the leftmost part of the window...
where the new content panel is.
Is there any way to prevent this from happening, and allow
the content that needs the scrollbars to have it?
thank you

Hi jratlantic,
So it appears that you changed the default setting for
overflow on the .SlidingPanelsContent rule:
.SlidingPanelsContent {
width: 547px;
height: 100px;
overflow:auto;
Instead of putting it on the .SlidingPanelsContent, try
putting it on:
.SlidingPanelsCurrentPanel {
overflow:auto;
And see if that makes a difference. That will ensure that
only the panel that is currently showing, and not animating, has
scrollbars.
--== Kin ==--

Sliding Panels Navigation Question

I'm using the sliding panels widget to display some image
thumbnails. The problem is, I'm displaying about 5 or so at a time,
and the showNextPanel function only moves the whole thing over by
one thumbnail, making it necessary to click it five times to show
the next set of thumbnails.
Mangled test file can be found
here.

Hello Luke,
I see there are 3 problems here you want/have to solve:
1. On page load you try to animate an element in page that
doesn't exists: thimbContainer. Every time you load the page in the
browser 3 alerts that the element is not found are generated by the
Spry Effects because the element isn't there. Please remove the
following code from the onload attribute attached to the body tag:
MM_effectAppearFade('thumbContainer', 2000, 0, 100, false);
2. The move next arrow doesn't work on the first click. The
problem appears because the SlidingPanel widget is instantiated
before the data to be putted in place in your page by the ds1 XML
DataSet. The regions are populated on page finish with the data but
the SlidingPanel widget will still try to animate the old,
incorrect element on the first click. To avoid this problem you'll
have to remove from page the SlidingPanel instantiation and
register a listener on the 'ticker' region update. Remove this
code:
<script type="text/javascript">
var sp = new Spry.Widget.SlidingPanels("ticker");
</script>
and just after the ds1 DataSet instantiation add the
following line:
Spry.Data.Region.addObserver('ticker',
{onPostUpdate:function(){sp = new
Spry.Widget.SlidingPanels("ticker");}});
3. To move the slider with the next 5 or prev 5 elements
you'll have to create your own functions that should add or
subtract from the current display index 5. The functions you look
for are:
function moveNextFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) + 5;
var maxPanels = sp.getContentPanels().length;
if (idx > maxPanels)
idx = maxPanels;
sp.showPanel(idx);
function movePrevFive(){
if (!sp)
return;
var idx = sp.getContentPanelIndex(sp.currentPanel) - 5;
var minPanels = 0
if (idx < minPanels)
idx = minPanels;
sp.showPanel(idx);
Please change the onclick for the previous and next arrows in
your Sliding Panels with calls to these 2 functions.
Regards,
Cristian

Sliding panel

I'm trying to modify the horizontally sliding panel to be side by side instead of top and bottom, I was able to make it work on firefox and safari, but it doesn't on internet explore, can somebody help me please.Thanks

http://www.files.riacodes.com/flex_sliding-panel/demo/
http://www.riacodes.com/flex/create-a-show-hide-sliding-panel-using-flex/
i think this is what you are looking for...
hope this helps.

Spry: Sliding panels - Next/previous buttons

I'm trying to make a horisontal sliding panel with next and
previous buttons. When the user are on the first panel I don't want
to display the previous button, or if the user are on the last
panel, I don't want to display the next button.
How can I check which panel thats active, and how can I get
the last panels ID/number?

var currentPanel =
sp1.getContentPanelIndex(sp1.currentPanel); // Current panel
var firstPanel = 0; // First panel
var lastPanel = sp1.getContentPanels().length - 1; // Last
panel

Horizontal scrolling with a table that is 100% width of window/container

Hello,
I'm a bit perplexed - it seems to me that the only way that I can have both fixed and scrollable columns in a table, with a table that resizes to the width of the user's screen, is to have percentage widths for all the entries.
Warning imminent rant
This seems to me to almost defeat the purpose. I want to be able to show more columns if the user has a large screen, and less if they have a small screen, keep certain key fields always showing and have the space avaliable for each column fixed to the size of the column contents. Having percentages of the screen for all columns just means that the column will get wider and thinner, not more or less!
Is there any hope that this might come along with client side scrolling in NetWeaver EhP2? Or does anyone have a cunning solution to the problem?
Now, I can sort of understand why this functionality has been build like this (the ABAP not having any real idea of how wide the screen actually is) - but why deliever such a solution at all? I can almost understand a fixed width situation, although all that code for a minimal improvement over just specifying the number of scrollable columns is suprising - but I struggle to see the use case for setting all the columns in a table to display as percentage widths.
Rant over -
If anyone does have any ideas how to have a 100% width table with fixed width columns - please do let me know.
Cheers,
Chris

Can this work:
Emebed your table UI element in Transparent Container UI element ( give it a fixed width ), now make table width as 100 % and make each column width as Width of Transparent Container / No of Columns.
Although I'm suggesting this but in my opinion giving fixed width to any UI element height width property is not advisable and recommended. It is because when browser will be resized by the user then if there is a fixed width settings then scrollbars would appear and layout may also go haywire.
If on the other hand if we are giving % (relative of window ) in width height of UI elements then layout will be adjusted automatically.
Regards
Manas Dua

How to link a specific panel with spry multiple element sliding

How to everybody to the forum, I've searched into this forum but maybe this mine is a particular case...
I've a html page with 4 different spry multiple sliding panels, named "primo" "secondo" terzo" "quarto", and all worked fine :-)
When you go to this page the first you can see is "primo" (default).
But the problem/question is this: If i want to send an email link to my page and want to see the "terzo" panel. how???
I've try to search many examples but none one of them meet me.
This is an example of this page called test.html
Many thanks to all wants help me
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Spry Multiple Elements Sliding Sample</title>
<link href="http://labs.adobe.com/technologies/spry/css/samples.css" rel="stylesheet" type="text/css" />
<script src="http://labs.adobe.com/technologies/spry/includes/SpryEffects.js" type="text/javascript" ></script>
<script src="http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js" type="text/javascript" ></script>
<style type="text/css">
.demoDiv{
height: 150px;
overflow: hidden;
.hiddenElement{
display:none;
/* Fix IE floating bug */
position: absolute;
top: 180px;
</style>
<script type="text/javascript">
var observer = {};
observer.nextEffect = false;
observer.onPostEffect = function(e){
if (this.nextEffect)
var eff = this.nextEffect;
setTimeout(function(){eff.start();}, 10);
this.nextEffect = false;
function pannelli(currentPanel)
    // The list of all the panels that need sliding
var panels = ['slide1', 'slide2', 'slide3', 'slide4'];
var opened = -1;
// Let's check if we have an effect for each of these sliding panels
if (typeof effects == 'undefined')
effects = {};
for (var i=0; i < panels.length; i++)
if (typeof effects[panels[i]] == 'undefined'){
effects[panels[i]] = new Spry.Effect.Blind(panels[i], {from: '0%', to: '100%', toggle: true});
effects[panels[i]].addObserver(observer);
if (effects[panels[i]].direction == Spry.forwards && currentPanel != panels[i])
opened = i;
//prevent too fast clicks on the buttons
if (effects[panels[i]].direction == Spry.backwards && effects[panels[i]].isRunning)
observer.nextEffect = effects[currentPanel];
return;
if (opened != -1)
observer.nextEffect = effects[currentPanel];
effects[panels[opened]].start();
else if (effects[currentPanel].direction != Spry.forwards)
effects[currentPanel].start();
</script>
</head>
<body onload="pannelli('slide1');">
<h3>Spry Multiple elements sliding</h3>
<a href="#" onclick="pannelli('slide1');" value="Slide 1">SLIDE 1</a>
<a href="#" onclick="pannelli('slide2');" value="Slide 2">SLIDE 2</a>
<a href="#" onclick="pannelli('slide3');" value="Slide 3">SLIDE 3</a>
<a href="#" onclick="pannelli('slide4');" value="Slide 4">SLIDE 4</a>
<br />
<div id="slide1" class="hiddenElement">
<div class="demoDiv" style="background-color: yellow;">
<h4>Primo</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="slide2" class="hiddenElement">
<div class="demoDiv" style="background-color: pink;">
<h4>Secondo</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="slide3" class="hiddenElement">
<div class="demoDiv" style="background-color: magenta;">
<h4>Terzo</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="slide4" class="hiddenElement">
<div class="demoDiv" style="background-color: green;">
<h4>Quarto</h4>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et
justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<br />
Test per collegamenti esterni<br /><br />
<a href="test.html?">vai al pannello I°</a> |
<a href="#">vai al pannello II°</a> |
<a href="#">vai al pannello III°</a> |
<a href="#">vai al pannello IV°</a>
</body>
</html>

silemma wrote:
else if (effects[currentPanel].direction != Spry.forwards)
effects[currentPanel].start();
</script>
</head>
<body onload="pannelli('slide1');">
Change the above to
else if (effects[currentPanel].direction != Spry.forwards)
effects[currentPanel].start();
var params = Spry.Utils.getLocationParamsAsObject(); //get the URL parameter
if (params.slide) { // if the slide parameter exists
    var slide = 'slide'+params.slide; // slide = slide+slide parameter
} else { // otherwise
    slide = 'slide1'
</script>
</head>
<body onload="pannelli(slide);"> 
Then when calling the page use the following notation: http://localhost/test/test.html?slide=3 where ?slide=3 is the third slide
I hope this helps.
Ben

Need help with horizontal accordian panels

Hi,
I'm wondering how I would re-create a horizontal accordian panel set, such as the one used in this website link, "http://www.thecapriapts.com/".
When I insert a "spry accordian" panel set, the panels are stacked on top of each other. I guess you would consider that a "vertical" accordian. Is it possible to manipulate the CSS to have it display horizontally, like the link I attached? Or.. is this a common javascript that I sould look into?
As always, thanks for your help out there...
Chris

With spry, there are two different kinds you can use: horizontal and vertical. What you're looking at in that site is horizontal. Usually, it appears as rectangles placed next to each other with the spry flying out below. In DW, you can go to your CSS rules for your spry menu and change the width and height of your boxes in your spry, depending upon which rule you have selected. Play around with that and see if you can just manipulate the horizontal accordian spry to where the rectangles end up being tall and thin. This will make it difficult, however, to get the text on its side like you see in that site. I'm not sure how you would go about doing that. But I would suggest trying to play around with the values in your CSS styles panel on the right (this is me looking at CS5 mind you. I'm not sure what you're running.)
Either way, for times sake and also readability, might I respectfully suggest playing around with other sprys to see if any look more aesthetically pleasing for your site? It would also make it a lot simpler to tweak to your liking.

Horizontal Sliding Panels with 100% width

Similar Messages

Maybe you are looking for