PDA

View Full Version : Convert mouseovertabs to vertical?



PaulBinCT
03-16-2015, 07:51 PM
1) Script Title: mouseovertabs menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.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!

Beverleyh
03-16-2015, 09:18 PM
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

vwphillips
03-17-2015, 12:52 PM
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


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

PaulBinCT
03-17-2015, 04:35 PM
Thanks Vic, and Beverley for your time...

So here's what I have so far:

http://removed (http://asperatech.com/TMAC/default_copy(2).html)

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 :(

Beverleyh
03-17-2015, 05:31 PM
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.

PaulBinCT
03-17-2015, 06:06 PM
OK... Let me go rerere-read it and check back. Thank you.

Beverleyh
03-17-2015, 06:14 PM
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/

PaulBinCT
03-17-2015, 07:19 PM
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 ;)