Horizontal Menu, is this possible?

General discussions about WebYep
Post Reply
testing1
Rank 1
Rank 1
Posts: 23
Joined: Tue Oct 13, 2009 5:25 pm

Horizontal Menu, is this possible?

Post by testing1 » Wed Mar 24, 2010 11:25 pm

Hello Johannes,

I'm currently working on: http://secretariatsmeadow.com/about-the-book.php?DOC_INST=2 and I had to improvise on the horizontal menu.

I originally tried using new_menu_simple_lists.css, and it was a disaster. Can the WebYep menu be horizontal (display:inline)? If it can, what example do you have available that I can learn from?

PS. Everything you have helped me with has been a success. I implement every single solution. Thanks for a great product.

testing1
Rank 1
Rank 1
Posts: 23
Joined: Tue Oct 13, 2009 5:25 pm

Re: Horizontal Menu, is this possible?

Post by testing1 » Wed Mar 31, 2010 1:20 pm

Hi Johannes and forum,

Does anyone have any thoughts on this? a horizontal menu instead of a vertical menu, and the css to go along with it…

johannes
Objective Development
Objective Development
Posts: 815
Joined: Fri Nov 10, 2006 4:39 pm
Contact:

Re: Horizontal Menu, is this possible?

Post by johannes » Wed Mar 31, 2010 4:13 pm

One thing ahead: Using CSS to style nested lists (built from UL/LI tags) is very broad topic...

But the code below can be a startig point.

It assumes that you have placed the WebYep Menu Element inside a DIV tag with class "MyMenu".

You should configure the Menu Element (in WebYep's config-inc.php) with "$webyep_bAutoCloseMenus = true" and "$webyep_bRememberOpenMenus = false".


Code: Select all

div.MyMenu ul {
   margin: 0;
   padding: 0;
   cursor: default;
   list-style-type: none;
}

div.MyMenu ul {
   display: table;
}

div.MyMenu ul>li {
   display: table-cell;
   position: relative;
   padding: 2px 6px;
}

div.MyMenu ul ul {
   display: table;
}

div.MyMenu ul ul li {
   display: list-item;
}

div.MyMenu ul li>ul {
   position: absolute;
   margin-left: -6px;
   margin-top: 2px;
   xwidth: 100px;
}

div.MyMenu ul li>ul li>ul {
   position: relative;
   margin-left: 20px;
   margin-top: 2px;
}

div.MyMenu ul, div.MyMenu ul ul {
   border: 1px solid #369;
   background-color: #EEEEEE;
}

div.MyMenu ul ul ul {
   border: none;
   background-color: #EEEEEE;
}

div.MyMenu a {
   text-decoration: none;
   padding: 4px;
}

div.MyMenu a:hover {
   background-color: #DDDDDD;
}

martinjbull
Rank 1
Rank 1
Posts: 27
Joined: Mon Dec 13, 2010 9:01 pm

Re: Horizontal Menu, is this possible?

Post by martinjbull » Mon Dec 13, 2010 9:09 pm

Hello
I would like to re-ignite this debate as the above is a very useful piece of code and thankyou to all who have taken part in this discussion so far. :D (I did discover that in the php code in the actual web page the php value for the Web Yep menu must also be set to "true" or it won't work. :) So change this (it will be found inside inside the tag starting with <div class=MyMenu> if you have set it up right in Freeway following the instructions above.

So, as well as following the excellent advice for the steps above, also change <?php webyep_menu("Menuname", false, "index.php", "", "", ""); // WebYepV1 ?>
to this:
<?php webyep_menu("Menuname", true, "index.php", "", "", ""); // WebYepV1 ?>

Is there a way for us non-css speaking (well not fluent anyway!) Freeway users to create horizontal WebYep menus with drop down sub menu items? Now that would be a fabulous tool.

Martin

Max
Rank 4
Rank 4
Posts: 176
Joined: Wed Nov 08, 2006 10:39 pm
Location: UK
Contact:

Re: Horizontal Menu, is this possible?

Post by Max » Tue Dec 14, 2010 10:55 pm

Hi Martin I have been looking into expanding the webyep menu styler action so it could be used in a horizontal fashion. At the moment the actions just creates vertical menus but it shouldn't be too much effort to create a horizontal option.
I will be probably be working on this for the next proper release but before that theres going to be a small bug fix plus the SEO actions plus with a bit of luck a few other niceties for the freeway community.

I will contact you the minute I have a working model
all the best max

Max
Rank 4
Rank 4
Posts: 176
Joined: Wed Nov 08, 2006 10:39 pm
Location: UK
Contact:

Re: Horizontal Menu, is this possible?

Post by Max » Tue Dec 21, 2010 9:03 am

Hi Martin
I have just seen that OBD have released a horizontal menu example with all the appropriate css styles already written.
This could be used to create a horizontal menu within freeway and so all you would need is to adjust the styles to suit your website design,
You would need to reference the style sheet in the head of the HTML published page, but this can be done by using my separate action for freeway called: Script Maker & Linker from here:
http://www.actionsforge.com/projects/vi ... ker-linker

What you do is

1. Designate a new page within the freeway site panel on the left hand side, to be a new css sheet sheet and apply the Script Doc.Creator action to that new page (pleases note this specific page need to be set to HTML output of 3.2 in the inspector palette (this will just effect this page and have no effect with the general set up of your document)

2. Then open up the horizontal_menu.css file using a text editor this file can be found within the HMenu example which can be downloaded from here:
viewtopic.php?f=6&t=5278
and paste all the styles which are in the horizontal_menu.css, file into the popup window which is activated by pressing the large filed button within the Script Doc.Creator action.

3. Then rename the page within the inspector palette: horizontal_menu.css Please note the page extension of css and not the default of html

It is at this point that Freeway will now publish all the styles in the correct order, the next job is to reference this style sheet in the head of the page which you have placed WebYep Menu on and add a class to the WebYep Menu


4. Navigate to the page which you intend to use the WebYep menu and using the Script Doc.Linker page action, apply it to this page. You should now see a list of pages which you can link to and just choose the horizontal_menu.css from the drop-down list

5. Finally you need to add a class to the WebYep menu and you do this by clicking on the WebYep menu box and using extended via:
Item/Extended
then click on the second tab <div> and in the popup window add this:
within the Name field:class
and within the Value field:MyMenu


Thats it its a bit of a longwinded way to get all the styles into Freeway but its the only way to guarantee that Freeway does not reorder any of the styles plus you still have the ability to adjust individual styles to your linking within Freeway

Obviously at some point I will be updating the existing menu styler so it is able to write for either a vertical or horizontal style configuration but that wont be until the next big release so for the moment this is how I would recommend getting those style into Freeway

All the best max

Post Reply