vertical slide-in links ... no omnislide! no! no!

[moscarda]

1) Script Title:
Slide-In Links
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/slideinlink.htm

3) Describe problem:
i'd like to mod this script so i can have a menu slide in vertically from the top, rather than vertically from the left. yes, i'm aware of the omnislide script also on dd. honestly i find the omnislide script oh-so-detestable, for more reasons than i care to go into here. i'd rather modify the slide-in links script because it is easier to work with, and you can do much more with it.

before i get started though, i'm sure its been done before, so can someone point me in the right directions?

[jscheuer1]

Omni Slide can be put into design mode for either css, html or both. In design mode, you may write your own styles and/or markup for it, fully customizing the menu if you like, using the script only for the menu's sliding action.

[moscarda]

i know i'm not an expert or anything, but this is so unnecessarily complicated. switching to design view only tells you again the roundabout way it generates the code. you still have to hack all these variables to specify external sheets and it is unclear where (or how) to put your own markup. like i said i really don't want to use omnislide, unless someone can point me to a version that someone already has running with similar specs.

sorry, i'm sure its a great bit of code, but it is so inaccessible.

[moscarda]

okay i tried to work with it... still not sure if itll meet my needs

im trying to mimic templatemonster.com's slide in, as you will see from my test page:

http://moscarda.com/omnislide/

right now my questions are
1. why aren't the two images lined up? one appears to be indented...
2. can i replace the image that slides in with linked images, complete with rollovers, etc... or does this script only allow you to put plain text or images on these lines:



bartext:'<img src="slidein.gif">', // bar text (the vertical cell) use text or img tag
///////////////////////////
menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
['<img src="slidein2.gif">'] //no comma after last entry

[moscarda]

can anybody please help me with these two questions (above)?

i'll paypal the first person to supply sample code $5. basically i want it to work just like the sample page listed in my earlier post, except the top image that slides in will actually be four image buttons that will link to four different pages.

i'm really broke, but i need this for a new portfolio site i have to have ready for a deadline, hence the paypal incentive. i'd also be down for a trade. i'm a really good graphic designer / artist, even though i'm not the best at the back end coding.

<3

[BorderTerroir]

You see to want to do the opposite of this page on my website;
http://www.hillamhotdogs.co.uk/LinksPages/TheDogsBlogs.htm

Here's how to remove items;
menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
[""], //create header
//["", "http://www.loisimages.com", "_new"],
//["", "http://www.statestreetbluesstroll.com/","_new"],
//["", "http://www.mediajazzbynight.com/", "_new"],
//["", "http://www.dynamicdrive.com/forums", "_new"],

//["Search", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
//["Search", "", "", 1],
//["", "http://www.google.com/", "_new", 1, "no"], //create three column row, requires d_colspan:3
//["", "http://www.yahoo.com/", "_new", 1, "no"],
//["", "http://www.altavista.com/", "_new", 1],

//["", "", ""], //create header
//["", "http://home.comcast.net/~ansiguy", "_new"],
//["", "http://home.comcast.net/~jscheuer1/side", "_new"] //no comma after last entry

]}; // REQUIRED!! do not edit or remove

Here's how to modify;
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Red Menu"], //create header
["Home", "http://www.hillamhotdogs.co.uk", ""],
["Doggy Gear", "http://www.hillamhotdogs.co.uk/LinksPages/DoggyGear.htm", ""],
["Doggy Sites", "http://www.hillamhotdogs.co.uk/LinksPages/DoggySites.htm", ""],
["Flyball Sites", "http://www.hillamhotdogs.co.uk/LinksPages/FlyballSites.htm", ""],
["Flyball Teams", "http://www.hillamhotdogs.co.uk/LinksPages/NorthernFlyballTeams.htm", ""],
["Flyball Map", "http://www.flyball.org.uk/flyball_map.php", "_new"],
["Miscellanea", "http://www.hillamhotdogs.co.uk/LinksPages/Miscellanea.htm", ""] //no comma after last entry

//["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
//["Email", "http://www.dynamicdrive.com/contact.htm", "",1],

//["External Links", "", ""], //create header
//["JavaScript Kit", "http://www.javascriptkit.com", "_new"],
//["Freewarejava", "http://www.freewarejava.com", "_new"],
//["Coding Forums", "http://www.codingforums.com", "_new"] //no comma after last entry

]}; // REQUIRED!! do not edit or remove

Hope this helps

John

[moscarda]

i need help with the vertical menu, not the horizontal... so does that mean i edit the top portion where the code reads:



Here's how to remove items;
menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
[""], //create header
//["", "http://www.loisimages.com", "_new"],
//["", "http://www.statestreetbluesstroll.com/","_new"],
//["", "http://www.mediajazzbynight.com/", "_new"],
//["", "http://www.dynamicdrive.com/forums", "_new"],

//["Search", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
//["Search", "", "", 1],
//["", "http://www.google.com/", "_new", 1, "no"], //create three column row, requires d_colspan:3
//["", "http://www.yahoo.com/", "_new", 1, "no"],
//["", "http://www.altavista.com/", "_new", 1],

//["", "", ""], //create header
//["", "http://home.comcast.net/~ansiguy", "_new"],
//["", "http://home.comcast.net/~jscheuer1/side", "_new"] //no comma after last entry


and this isnt really what i was asking, i want to use this script without having to worry about it forcing the table elements like this.

[jscheuer1]

Now that you have it close to what you want, it's time to switch to design mode. Take these styles and markup generated by the script and place the style in the head, the markup in the body (place the markup as the first thing after the opening body tag):


<style type="text/css">
#menu2 {
top:0;
left:50%;
position:fixed;
overflow:visible;
z-index:100;
}
#menu2 div {
border-width:0ex 0ex 0ex 0ex; /*Menu's outer border*/
border-style:none;
border-color:transparent;
position:absolute;
color:black;
background-color:transparent;
}
#menu2 table {
border:0px inset transparent; /*Menu's inner border*/
border-left-width:0;
border-bottom-width:0;
font-family:verdana, sans-serif; /*Overall font for Menu*/
font-size:80%;
border-collapse:collapse;
background-color:transparent;
width:13.438em;
}
#menu2 td { /*Characteristics for cells in the menu table - do not specify width here*/
border-bottom:0px inset transparent;
border-left:0px inset transparent;
height:1.25em;
padding:0;
margin:0;
text-align:left;
}
#menu2 #menu2bar { /*Characteristics for initially visible 'draw' bar (the vertical cell)*/
height:1.797em;
background-color:transparent;
color:transparent;
font-weight:bold;
text-align:center;
cursor:default;
}
#menu2 .heading { /*Characteristics for heading cells in the menu table*/
height:1.719em;
color:transparent;
font-weight:bold;
text-indent:1ex;
background-color:transparent; /*Background Color for menu headings */
width:11.641em; /*This will be the menu body width. This and 4 times the border width should also be the menu table's approximate width*/
vertical-align:middle;
text-align:left;
border-left-color:transparent;
border-left-style:solid;
}
#menu2 a {
width:100%;
height:100%;
display:block;
padding-top:0em;
}
</style>


<div style="width: 996px; margin-left: -498px;" id="menu2" onmouseover="movein(this);" onmouseout="moveout(this);"><div style="top: -72px; width: 996px;"><table>
<tbody><tr><td class="heading" colspan="2"><img src="slidein2.gif"></td></tr>
<tr><td id="menu2bar" colspan="2"><center><img src="slidein.gif"></center></td></tr>
</tbody></table></div></div>


In menuItems.js change the highlighted:


menu[2] = { // REQUIRED!! This menu explicitly declares all available options even if they are the same as the defaults
id:'menu2', //use unique quoted id (quoted) REQUIRED!!
/////////////////////////////////////
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
/////////////////////////////////////
user_defined_stylesheet:true, //if true, prevents script from generating stylesheet for this menu
user_defined_markup:true, //if true, prevents script from generating markup for this menu
design_mode:false, //if true, ge

Once you have all that, you may adjust everything manually using the style and the HTML code.

[Timberlake]

Hi, I am a grapchic artist and html editor. My problem is exactly the same. I would like to create a menu which slides into the screen just like on templatemonster.com. I tried to copy the whole webpage and delete the unnecessary codes progressively. I searched for solutions on internet forums and found some nice scripts but almost all the time there were the same problems:

1. Need to be VERTICAL - Almost all the scripts I have found on internet was horizontal and the descriptions did not mention how to modify the sripts to make them vertical.
2. Need to be HTML - It was a big problem for me that the main content was generated by the script and not by the html code.
3. Need to be SIMPLE - The script should be as simple as it can be. I really dont want so many parameters. I have found some script that was really good but it was about 55 KB....55 KB!!....c'mon smart people there, I am not a genius but I am sure that a simple motion really dont need an 55 KB external .js file. I was looking at the codes and I partly understood what was the motion engine and what were the other extra but unnecessary scripts. Needless to say that I wasnt able to wipe out the unnecessary parts of the script.

My dream is this:
http://www.roveronline.hu/arc_art/slidein.gif
div#1: property-less (invisible) container that slides up and down
div#2: main container that contains any html elements and has the "onmouseOUT" event which makes div#1 slide UP
div#3: tab that can only be seen when the whole div#1 is in up-status and has the "onmouseOVER" event which makes the div#1 slide DOWN

This would be a nice solution for me, and for anybody who is as brainless as I am :D

Can someone help with this?