BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - Need help with drop down menu
  FAQ FAQ  Forum Search   Register Register  Login Login

Need help with drop down menu

 Post Reply Post Reply
Author
Message
meetdilip View Drop Down
Newbie
Newbie


Joined: Jan 28 2014
Status: Offline
Points: 2
Post Options Post Options   Thanks (0) Thanks(0)   Quote meetdilip Quote  Post ReplyReply Direct Link To This Post Topic: Need help with drop down menu
    Posted: Jan 28 2014 at 4:18am
Hi, 

I am new here. Just learning how to use OE. I am try to have a drop down menu which otherwise is invisible. Please check the image attached. In that Green colour menu needs to appear always as it is main navigation menu. But the Blue menu I would like to appear only if someone mouse over the particualr link in then Main Menu. It will be nice if someone can help me use different links on Blue menu corresponding to mouse over in the main menu. Please do let me know if you want any details. 

Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Jan 28 2014 at 9:48am
Hi.

I think there's no "integrated" horisontal menu element. I propose 2 solutions, both need the Code Block (Source) type Javascript position Header, and Popup Menu element. But I am not sure they will give you the design you want (100% width etc.)

First solution: add Code Block Source and Popup Menu.

Put this code to the Code Block:

$(function(){
 
  $('#WE01a6d764c9  .OESZ_WEMenuItem').css({display: 'inline', width: '200px', overflow: 'hidden', float: 'left', clear: 'none'});
  $('#WE01a6d764c9 .OESZ_WEMenuGroup').css('width', '800px');
 
});

replace WE01a6d764c9 by ID of your Popup Menu (ID can be found in the Properties tab for each element). You can then replace 200px and 800px by values you need, then try to configure Styles->Customize for needed Style Zones.

Second solution: add Code Block Source, Popup Menu, then Element Group which will represent the "blue" content on your picture.

Put this code to the Code Block:

$(function(){
 
  $('#WEe935f1bade  .OESZ_WEMenuGroup').html('').
    append($('#WEadb6b67110').
        css({left:0,top:0,position:'relative',display:'block',visibility:'visible'})
    );
 
});

replace WEe935f1bade by ID of your Popup Menu and WEadb6b67110 by ID of the Element Group (ID can be found in the Properties tab for each element). Also, make you Element Group element Invisible by unchecking its Visible property. This will "move" the Element Group into the Popup Menu.


But I think it's best you find some good scripts on the web and apply them (again, using Code Blocks). If you are really blocked, I can try to write a simpler solution, but you would need to give more details on needed result.

Good day
D


Back to Top
Chris OE View Drop Down
Admin Group
Admin Group


Joined: Jan 22 2013
Location: New York
Status: Offline
Points: 186
Post Options Post Options   Thanks (0) Thanks(0)   Quote Chris OE Quote  Post ReplyReply Direct Link To This Post Posted: Jan 28 2014 at 5:08pm
Thanks Dmit. I like the second option. Toggling the CSS visible/invisible is a good way to go.

Here's another script to consider, meetdilip: http://www.htmldrive.net/items/show/239/Horizontal-Subnav-w-CSS-jQuery


Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.