Solved

Urgent - accordion style left hand navigation bar

Posted on 2011-03-22
8
381 Views
Last Modified: 2012-05-11
I have 8 hours to have this done (see the area in the red box on my screenshot).

I am really struggling with all aspects.  I'm stressed and not thinking well because I am stressed.

How can I accomplish this?

The criteria are:

-It must look as close to the mock-up as possible
-It must function as an "accordion" style menu.
-The arrow on the right edge of the button must point down when sub items are visible, and be pointing to the right when the menu is collapsed.


I've made **some** progress with the accordion, thanks to some expert help, but it still has a long way to go, IMHO.


If there are some inexpensive tools that can help this, I would be willing to go that route as well.  Anything to make this easier.

Here are some purchases I am considering:

CSS3 Menu Maker:
http://css3menu.com/

but I am not confident it supports "accordion" type menus


Flash Accordion:
http://www.oxylusflash.com/flashfiles/unlimited-levels-accordion-menu-as3

If I could make the accordion look like the screenshot, this would work.



Thanks,


Tom
0
Comment
Question by:Tom Knowlton
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 9

Expert Comment

by:DjDezmond
ID: 35191821
I cant see a screenshot dude...
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 35191905
>>>I cant see a screenshot dude...


Maybe because I forgot to attach it....  :P


accord.png
0
 
LVL 9

Accepted Solution

by:
DjDezmond earned 500 total points
ID: 35191962
OK, with limited time and knowledge of exactly what you are after, i can only offer some general assitance:

The idea when creating an accordian, is to set within your CSS file (or directly in the page if you prefer to store your CSS information that way) 2 different header classes (one for selected, and one for unselected):

 
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
    padding: 5px;
    cursor: pointer;
}

.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-image: url('Images/SmallSquare.bmp');
    padding: 5px;
    cursor: pointer;
}

Open in new window


The accordian HTML code (on the page) should then look something like this (watch for the two CSS classes you have just seen above):

 
<ajaxToolkit:Accordion ID="TheAccordion" runat="server" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected"
                        ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="80" 
                        TransitionDuration="175" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true" SelectedIndex="0" Width="100%">
                        <Panes>               

                        </Panes>
                    </ajaxToolkit:Accordion>

Open in new window


Make sure that you tell the page to bother looking for your CSS file, by specifying it in the header of the page:

 
<head runat="server">
<title>Your Title here</title>

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

</head>

Open in new window


You could, if you preferred put the style info directly into the header of the page (as I said above):

 
<head runat="server">
<title>Presentation Manager</title>

<style type="text/css">
.accordionHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
    padding: 5px;
    cursor: pointer;
}

.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-image: url('Images/SmallSquare.bmp');
    padding: 5px;
    cursor: pointer;
}
</style>
</head>

Open in new window



Make sure that the CSS classes do exactly what you need, dont just use my examples as they come straight of one of my sites. For example, in the unselected class, put an image of a sideways arrow... and in the selected one, an image of a downwards arrow. I imagine you will need to tinker around for abit, but this should give you a good starting point.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:DjDezmond
ID: 35191989
Do you know what, there are many fancy ways to do the rounded edges and frilly bits in CSS, but the quickest and easiest (but lazy way), is to crack open photoshop, or any imaging software and create two images... one rounded box with a sideways arrow, and one with a downwards arrow.

Set these as the background images for the selected and unselected CSS classes respectively. and your foretext should be rendered on top.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 35192007
>>>>>Do you know what, there are many fancy ways to do the rounded edges and frilly bits in CSS, but the quickest and easiest (but lazy way), is to crack open photoshop, or any imaging software and create two images... one rounded box with a sideways arrow, and one with a downwards arrow.

Set these as the background images for the selected and unselected CSS classes respectively. and your foretext should be rendered on top.
-----------------

I really like this idea...I will probably go this route.

0
 
LVL 9

Expert Comment

by:DjDezmond
ID: 35192053
Here is abit of a tutorial from the ASP.Net site that may help you along.
  http://www.asp.net/ajaxlibrary/act_Accordion.ashx 

Good luck...
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 35192101
thx
0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 35208998
Thanks.

I found a tool for $85 from Likno.com that builds accordions.

Seems to be what I needed.
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
asp.net figure out error 3 47
Securing WEBAPI on Azure 2 55
Slow Down an Animation 3 29
Selenium cssSelector and attribute 5 11
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question