View Full Version : Anyway to have DD Accordion Menu centred before expanding?

05-15-2011, 09:16 AM
[EDIT : Crap, I just realized I didnt put what I was asking for in the thread title! Woops, what its supposed to read is "Anyway to have DD Accordion Menu centred before expanding?" Sorry for anyone who came into this thread on accident.]

Hi There,

In creating my photography website and thought accordion menu would be perfect in this one spot. I used the one here to get nested levels

You can my menu here on the left hand side(before you look at the site though, please keep in mind it is farrrrrrr from being finished! So no critiques on the site yet please)
(upon completion the "Series" will have a links to more of my photo series)

There is one obvious thing for me, the menu simply needs to be centered in the box, then when a submenu opens up, the whole menu (with all the headers) should expand again, filling up the space more.
This may be hard to explain in words, but here is an example
My current menu now is essentially "top aligned" and I want it to be "centred" like the menu in the above link is by default

The menu above is essentially what I want, in my little box on the left of my site, but I dont want to change from the menu Ive already created because Ive already got the nested bits in the one I have, and Ive already done half the work with the menu I currently have.

Can anyone please help? Im fairly new to web design and any help is appreciated, thank in advance!

[EDIT : Crap, I just realized I didnt put what I was asking for in the thread title! Woops, what its supposed to read is "Anyway to have DD Accordion Menu centred before expanding?" Sorry for anyone who came into this thread on accident.

05-15-2011, 07:34 PM
This is mainly a CSS issue, namely, how to vertically center a content on the page. Doing a search on Google, one technique seems to suggest wrapping the entire content- in this case the menu- in the following DIV wrappers:

<div class="greenBorder" style="display: table; height: 700px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style="#position: relative; #top: -50%; ">

<div class="arrowlistmenu">

<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
Regular contents here. Header does not expand or contact.



The technique is explained here (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html). Being a CSS issue you might need to try a few different things before achieving the look you want.