Results 1 to 2 of 2

Thread: Anyway to have DD Accordion Menu centred before expanding?

  1. #1
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Red face Anyway to have DD Accordion Menu centred before expanding?

    [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
    http://www.dynamicdrive.com/dynamici...ubexpandable=0

    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)
    http://web.me.com/wstruye/WStruyePhoto/Action.html
    (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
    http://www.oxylusflash.com/files/1580/index.html
    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!
    -Winston

    [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.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:
    Code:
    <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>
    </ul>
    
    <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>
    </ul>
    
    <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>
    </ul>
    
    <h3 class="menuheader" style="cursor: default">FeedBack</h3>
    <div>
    Regular contents here. Header does not expand or contact.
    </div>
    
    </div>
    		
    </div>
    </div>
    </div>
    The technique is explained here. Being a CSS issue you might need to try a few different things before achieving the look you want.
    DD Admin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •