Results 1 to 8 of 8

Thread: Convert mouseovertabs to vertical?

  1. #1
    Join Date
    Mar 2015
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Convert mouseovertabs to vertical?

    1) Script Title: mouseovertabs menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...seovertabs.htm

    3) Describe problem:

    Hi all,

    I'm trying to use the mouseovertabs menu, but style it with the submenu arranged as a vertical (and above, no less). I thought this would be a simple thing but I'm having no luck at all. Any suggestions would be very welcome!

    Thanks!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I recommend you read up on CSS floats. Here is a an article, with demos, to get you started http://alistapart.com/article/css-floats-101

    If you need more help, please post a link to your page, with the changes you have made, explaining clearly which aspect is not working as expected. You can provide screen caps/mockups as needed, to illustrate problems or ideals. If your website is not yet fully live, that's ok - you can setup a reduced test case for us to troubleshoot instead. At the end of the day, if you would like help, you need to make it easy for people to help you
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    css

    /* ######### CSS for sub menu container below ######### */

    .tabsmenucontentclass{
    clear: left;
    background: #E8E8E8;
    width: 150px;
    padding: 5px;
    border: 1px solid silver;
    }

    .tabsmenucontentclass ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }

    .tabsmenucontentclass2 li{
    float: left;
    margin-right: 1em;
    }


    html

    Code:
    <div id="mysubmenuarea" class="tabsmenucontentclass">
    
    <!--1st link within submenu container should point to the external submenu contents file-->
    <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
    
    </div>
    <div id="mytabsmenu" class="tabsmenuclass">
    <ul>
    <li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
    <li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
    <li><a href="http://www.codingforums.com">No Sub Menu</a></li>
    </ul>
    </div>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. The Following User Says Thank You to vwphillips For This Useful Post:

    PaulBinCT (03-17-2015)

  5. #4
    Join Date
    Mar 2015
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks Vic, and Beverley for your time...

    So here's what I have so far:

    http://removed

    As you'll see, only the first two main menu items are wired up at all, but the submenu is displaying below and inline.
    If either of you can get me started at least, I'd be deeply grateful. There's clearly something about the CSS in this menu that's eluding me... needless to say

    BTW Vic, I did try your very kind contribution but it doesn't appear to work
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	HPMockUp.jpg 
Views:	76 
Size:	92.9 KB 
ID:	5639  
    Last edited by PaulBinCT; 03-17-2015 at 06:06 PM.

  6. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Your "submenucontents.htm" is a complete web page and it doesn't need to be - it just needs to be an HTML fragment. Have another look at the demo for the correct format. Once that's corrected, it will make troubleshooting easier.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #6
    Join Date
    Mar 2015
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    OK... Let me go rerere-read it and check back. Thank you.

  8. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Just wondering - why have you chosen this menu if you are going to change key characteristics? Wouldn't it be easier to choose a menu with linear dropdowns and then edit that to go upwards? Why start off with this particular one?

    You can create "drop up" menus pretty easily with CSS. Here's a quick demo I set up: http://jsfiddle.net/Lw6696uq/
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  9. #8
    Join Date
    Mar 2015
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    LOL... very logical question Beverley I was using it because I had used it a few times previously and was quite successful styling it, so I thought I would find it pretty "simple". In point of fact, I just decided to start over with a different product and I'm nearly done.

    So, thanks again, to you both and feel free to mark this case closed

Similar Threads

  1. mouseovertabs delay
    By remcov in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-04-2013, 06:17 AM
  2. Mouseovertabs Menu
    By Ruprecht in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 02-13-2011, 07:21 AM
  3. Mouseovertabs question
    By imacg in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-31-2009, 02:34 PM
  4. Mouseovertabs menu
    By Phanitha in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 03-25-2009, 05:48 PM

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
  •