Results 1 to 5 of 5

Thread: Configuring Omni Slide Menu

  1. #1
    Join Date
    Apr 2013
    Location
    Massachusetts
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Configuring Omni Slide Menu

    1) Script Title: Omni Slide Menu

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

    3) Describe problem: First off..

    Hello to all!

    I am new to these forums and new again to web code, but this is already one of the best sites I have found. Thank you!

    Also-- I did try search first. Searching for Omni Slide Menu in the site brought me to ten pages of hits and to be honest I was overwhelmed. There was no way I could see to order by date or search again for more specific options within these hits. Both would aid self-help immensely.

    My problem in a nutshell--

    I like what I saw. I want to use this menu. I only need the top menu.

    I have reviewed properties.htm and menuItems.js and perhaps I have missed it (I do apologize if it is there), but I do not see how to turn off the side menus? This is my initial conundrum.

    Once I figure that out, my next steps will be moving it to the upper left rather than the top center, but this seems like it should be pretty easy via the css properties. Likewise colors and fonts I would assume are changed also via css.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    Your first question is almost too basic to appear in the forums, but it probably does. Just remove the menus you don't want from the menuItems.js file:

    Code:
    /***********************************************
    * Omni Slide Menu script -  John Davenport Scheuer
    * very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
    * as first mentioned in http://www.dynamicdrive.com/forums
    * username:jscheuer1
    ***********************************************/
    
    //One global variable to set, use true if you want the menus to reinit when the user changes text size (recommended):
    resizereinit=true;
    
    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:false, //if true, prevents script from generating stylesheet for this menu
    user_defined_markup:false, //if true, prevents script from generating markup for this menu
    design_mode:false,  //if true, generates a report of the script generated/intended styles and markup (as a design aid)
    menutop:160,     // initial top offset - except for top menu, where it is meaningless
    menuleft:'45%',    // initial left offset - only for top menu, as pixels (can be a quoted percentage - ex: '50%')
    keepinview:80,   // Use false (for not static) - OR - true or numeric top offset when page scrolls
    menuspeed:20,    // Speed of menu sliding smaller is faster (interval of milliseconds)
    menupause:500,   // How long menu stays out when mouse leaves it (in milliseconds)
    d_colspan:3,     // Available columns in menu body as integer
    allowtransparent:false, // true to allow page to show through menu if other bg's are transparent or border has gaps
    barwidth:20,     // bar (the vertical cell) width
    wrapbar:true,    // extend and wrap bar below menu for a more solid look (default false) - will revert to false for top menu
    hdingwidth:210,  // heading - non linked horizontal cells width
    hdingheight:25,  // heading - non linked horizontal cells height
    hdingindent:1,   // heading - non linked horizontal cells text-indent represents ex units (@8 pixels decimals allowed)
    linkheight:20,   // linked horizontal cells height
    linktopad:3,     // linked horizontal cells top padding
    borderwidth:2,   // inner border-width used for this menu
    /////////////////////////// quote these properties: /////////////////////
    bordercolor:'#000080', // inner border color
    borderstyle:'solid',    // inner border style (solid, dashed, inset, etc.)
    outbrdwidth:'0ex 0ex 0ex 0ex', // outer border-width used for this menu (top right bottom left)
    outbrdcolor:'lightblue',  // outer border color
    outbrdstyle:'solid',     // outer border style (solid, dashed, inset, etc.)
    barcolor:'white',        // bar (the vertical cell) text color
    barbgcolor:'#4d6814',   // bar (the vertical cell) background color
    barfontweight:'bold',    // bar (the vertical cell) font weight
    baralign:'center',       // bar (the vertical cell) right left or center text alignment
    menufont:'verdana',      // menu font
    fontsize:'90%',          // express as percentage with the % sign
    hdingcolor:'white',      // heading - non linked horizontal cells text color
    hdingbgcolor:'#4d6814',  // heading - non linked horizontal cells background color
    hdingfontweight:'bold',  // heading - non linked horizontal cells font weight
    hdingvalign:'middle',    // heading - non linked horizontal cells vertical align (top, middle or center)
    hdingtxtalign:'left',    // heading - non linked horizontal cells right left or center text alignment
    linktxtalign:'left',     // linked horizontal cells right left or center text alignment
    linktarget:'',           // default link target, leave blank for same window (other choices: _new, _top, or a window or frame name)
    kviewtype:'fixed',       // Type of keepinview - 'fixed' utilizes fixed positioning where available, 'absolute' fluidly follows page scroll
    menupos:'top',         // set side that menu slides in from (right or left or top)
    bartext:'MY MENU',       // 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
    ["Hot Sites"], //create header
    ["Lois Images", "http://www.loisimages.com", "_new"],
    ["State Street Blues", "http://www.statestreetbluesstroll.com/","_new"],
    ["Media Jazz by Night", "http://www.mediajazzbynight.com/", "_new"],
    ["DD Help Forum", "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],
    ["Google", "http://www.google.com/", "_new", 1, "no"], //create three column row, requires d_colspan:3
    ["Yahoo", "http://www.yahoo.com/", "_new", 1, "no"],
    ["AltaVista", "http://www.altavista.com/", "_new", 1],
    
    ["Personal", "", ""], //create header
    ["Ansi Art Gallery", "http://home.comcast.net/~ansiguy", "_new"],
    ["John's Javascript Jungle", "http://home.comcast.net/~jscheuer1/side", "_new"]  //no comma after last entry
    
    ]}; // REQUIRED!! do not edit or remove
    
    
    ////////////////////Stop Editing/////////////////
    
    make_menus();
    You can use css to style the menu. But as you can see, there are many options in the menuItems.js file that can be used to do that for you.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2013
    Location
    Massachusetts
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the quick reply John. So easy I didn't even think of that hehe. Thanks!

    What I really wanted to do is use this drop down menu to extent out of a logo image I have on my site so I wanted to use css to make its position fixed and set my top and left offsets to position it right there.

    So in menuitems.js I first set design_mode:false to true and got the css output. I then put the css in a style sheet, linked to it from the html file, and set user_defined_stylesheet:true in menuitems.js so I could edit it there but it just isn't as easy as that it seems.

    I tried repositioning by editing the top and left values for the main menu container.

    While the menu does move down setting top (using the bottom edge of the menu for this value) it was hiding off the screen so I now see a bit of the menu above the bar. I guess I might be able to get around this with z-index or maybe hiding overflow and setting a visible area but I am not sure how the javascript really works (or how those css ideas I have would either really yet) and oh so rusty trying to follow it all.

    Setting the css left property the menu seems to be using the center of the menu element for the horizontal position so I get half a menu. I can simply add more space but I am not sure what effect that might have with older or different browsers. I've only got the latest FF, IE, and Chrome.

    Omni Menu Bar Tests

    Any ideas with either of these above issues?

    One other weird thing I noticed was using px on setting the top and left and I ended up with residual horizontal lines on the screen after the menu retreats. Setting these values as just a number and no unit doesn't....

    If the changes I need aren't easy to pull off I also noticed the Pure CSS3 Push Down Panel, which looks like it is similar in providing a drop down display area I could stick a nav menu on and make pretty with css.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,239 Times in 3,200 Posts
    Blog Entries
    12

    Default

    I'm not sure what you're asking but the menu appears too far to the left here. To fix that, add the highlighted as shown to the wmenu.css file:

    Code:
                                /*Menu Links*/
    
    /*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
    may be inherited in some browsers from other 'a' element styles (if any) on the page*/
    
    #wmenu {
    top:66;
    left:10;
    position:fixed;
    overflow:visible;
    z-index:100;
    margin: 0 !important;
    }
    #wmenu div {
    border-width:0 . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2013
    Location
    Massachusetts
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks again John. Your suggestion worked perfectly for getting the whole menu on page. Somewhere extra CSS is getting introduced. I did a little test setting all the variables to turn off styles and markup:
    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:true, //if true, generates a report of the script generated/intended styles and markup (as a design aid)

    http://www.walrusway.com/osm-true/js/menuItems.js

    I even renamed my css sheet but somehow the script is still adding in css and html. I left it up at http://www.walrusway.com/osm-true/ but decided to go with the Slashdot style menu for now. It doesn't hide unfortunately but the expanding and contracting menus are pretty slick. Thanks again for your help and the great site!

Similar Threads

  1. Omni Slide Menu does not slide out on smart phone
    By paulzab in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-01-2012, 07:16 AM
  2. omni slide menu - please help!
    By dotolee in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-18-2010, 03:35 PM
  3. Omni Slide Menu
    By dhmakhecha in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-11-2009, 09:21 AM
  4. Omni Slide Menu Gets cut off in IE
    By zzman in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 07-21-2008, 05:52 PM
  5. Omni Slide Menu
    By Slutz in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-29-2008, 03:37 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
  •