Persistent Drop Line? (Wayfinder + CSS Play Example)

44 Posts

Alan.Graham Reply #1, 18 years, 2 months ago

Hi,

Is it possible to get a persisten drop line, e.g when you are on a page, the drop line for that page is displayed until you mouse over another link.

Currently i have modified the cssplay example included with wayfinder to suit my needs, and my original idea half worked. Here is my brief run down of what i did:

Modified the inner menu template so the active class was applied to the List element, then modified the appropriate CSS to display the list that is below. This worked but permanently displayed the dropline under every other link.

Am i making sense? Sorry it is a late night, and this one is bugging me huh

I do have a site in development that it is being used on, but will have to give out a login via Personal Message if you would like to see it.

Cheers Peeps

Al

@ A Mod: Think i threw this in the wrong place, please feel free to move it. Once again late night sad

19 Posts

ryanlwh Reply #2, 18 years, 2 months ago

Hmm.. do you mean droplink instead of dropline?

If I understand you correctly, you have a structure like

UL
  LI
    UL

and you’re trying to have the first level LI:hover triggers the second level UL to flyout/dropdown?

4,205 Posts

dev_cw Reply #3, 18 years, 2 months ago

Yes this can be done. The principal is to use the here state to display a class that "opens" the sub menu. Without seeing the code you have it is hard to spot what is wrong.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

40 Posts

tcochran Reply #4, 18 years, 2 months ago

This can be done using onmouseover and onmouseout javascripts. See usage in menu at www.boomernet.com

This was derived from dropline concepts detailed at http://tutorials.alsacreations.com/deroulant/

44 Posts

Alan.Graham Reply #5, 18 years, 2 months ago

Dudes,

Thanks for the replys.

@Tcochran: This is what i have got already, just want it so when you click about us, you are taken to the specific page, and the about us dropline is still shown, and it is pure css

@dev_dw: Here is that code you wanted, and some explanations on where i changed things.

All the code came straight from the muddydogpaws example, seen here... http://www.muddydogpaws.com/development/wayfinder/examples/example-3.html

With a few CSS Modifications i have managed to get the menu to look like the attachement (one with dropline included)

The modified code is below, i wont post the original as it will make the post too long.

Dropline.CSS

/* common styling */
.menu {font-family: arial, sans-serif; height:20px;  margin:0; font-size:11px; /* margin:50px 0; */ background:#fff; position:relative;  top: 51px;  left: 0px; float: right;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; background:url("images/norm_right.gif") no-repeat right top; margin-right: 2px;}
.menu ul li.last {margin-right: 0px;}
.menu ul li a, .menu ul li a:visited {float:left;  text-decoration:none; padding:0 10px 0 10px; height:20px; line-height:20px; color:#000; background:url("images/norm_left.gif") no-repeat left top; }
.menu ul li ul {display: none;}
.menu ul li a:hover {color: #666666;}

/* specific to non IE browsers */

/*my try at getting it to work: .menu ul li.active ul {display:block; position:absolute; top:16px; left:0; color:#fff;} 
but that kept the current menu shown as well as overlay the other droplines (Bit obvious when you think about it*/
.menu ul li:hover a {color:#666666;}
.menu ul li:hover ul {display:block; position:absolute; top:16px; left:0; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {color:#fff;}
.menu ul li:hover ul li:hover a.hide { color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li {background: none;}
.menu ul li:hover ul li.last {padding-right: 50px;}
.menu ul li:hover ul li a {display:block; color:#000000; background: none;}
.menu ul li:hover ul li a:hover { color:#666666;}

Dropline_IE.CSS Most code the same, no real changes

table {border-collapse:collapse; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}
.menu ul li a, .menu ul li a:visited {background:url("images/norm_left.gif") no-repeat left top;}.menu ul li a:hover {color:#fff; }
.menu ul li a:hover ul {display:block; position:absolute; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub { color:#fff;}
.menu ul li a:hover ul li a {display:block;color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {color:#fff;}

Now in both the css files i have removed the code for the 3rd level dropline as it wont be required in the site.

Now i also changed the following chunk, just to move the active class to a List element not the anchor

Chunk: CSSPLAY_ROW

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Now i think that is it, if you want specific access to the site etc, i can sort something out laugh

Cheers Again

Al

40 Posts

tcochran Reply #6, 18 years, 2 months ago

OK, to have the detailed sub-menu for "about us" automatically appear on the "about us" page, you could probably do that with a series of template variables.

Or, more generically, you can use if-elseif conditionals in PHP -- or if you have a lot of them, then simply use a switch conditional:

switch ($Category) {
case "aboutus":
statement(s)1;
break;
case "nextone":
statement(s)2;
break;
case "other":
statement(s)3;
break;
}

44 Posts

Alan.Graham Reply #7, 18 years, 2 months ago

Hate to be picky but is there a way i can do this with minimal javascript or just pure CSS. I dont want to venture into PHP as wayfinder is already done, and the problem i think i will encounter is i will still get the overlap.

Anybody tried this before using only CSS or a little bit of JS onto the wayFinder templates?

EDIT: Either that or how hard would it be to modify the following CSS Play Example:

http://www.cssplay.co.uk/menus/pro_droptab.html

2 Posts

minghong Reply #8, 18 years, 2 months ago

Hi, I also need to do something like this, but the menu has a maximum of 3 levels.

Did you find any menu implementation that need our requirements?

I used the code like this:
http://www.muddydogpaws.com/development/wayfinder/examples/example-3.html

But it is not persistent.

The persistent menu that you found has 2 levels only. I’m doubted if it can be extended to 3 levels:
http://www.cssplay.co.uk/menus/pro_droptab.html

sad

44 Posts

Alan.Graham Reply #9, 18 years, 2 months ago

@Minghong: I think that is doable, i have been a bit busy at the moment with other work and things, but i will look at writing the Wayfinder pro droptab, and then work out if i can get 3 levels (it cant be that hard, well perhaps having the 3rd level persistent but i am sure i can work something out)

Till then i will keep in touch, need to find some free time tongue

2 Posts

minghong Reply #10, 18 years, 2 months ago

At last I spent hours to get it done.

My menu is based on Wayfinder + CSSPlay (in assets/snippets/wayfinder/examples/cssplay/template.html), with the following modification.

The idea is simply: assign or remove the active class name of the menu item when the mouse move in or out the menu items.

1. In wfParentRow, duplicate class name of <a> to <li>, i.e.:

<li [+wf.classes+]><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
    <!--[if lte IE 6]>
    <a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
    <table><tr><td>
    <![endif]-->
    [+wf.wrapper+]
    <!--[if lte IE 6]>
    </td></tr></table>
    </a>
    <![endif]-->
</li>

Don’t remove the class name for <a>. The JavaScript I mentioned below relies on it. Also, I’m too lazy to modify the CSS selectors.

2. Add the following within the HTML <head>:

    <script type="text/javascript" src="[(base_url)]manager/media/script/mootools/mootools.js"></script>
    <script type="text/javascript">
    Window.addEvent('load',function() {
        // Update the menu
        function update( e )
        {
            // Inactivate all active items
            var active_items = $$( '.menu li.active' );
            for ( var i = 0, n = active_items.length; i < n; i++ )
            {
                active_items[ i ].removeClass( 'active' );
            }

            // Reactivate all items that were active on page load, when moving out from the menu
            if ( e.type == 'mouseout' )
            {
                var relatedTarget = e.relatedTarget || window.event.toElement;
                if ( ['a', 'li', 'ul'].indexOf(relatedTarget.nodeName.toLowerCase()) < 0 )
                {
                    var active_links = $$( '.menu a.active' );
                    for ( var i = 0, n = active_links.length; i < n; i++ )
                    {
                        var active_link = active_links[ i ];
                        active_link.parentNode.addClass( 'active' );
                    }
                }
            }

            // Activate or inactivate the current item
            if ( e.type == 'mouseover' )
            {
                this.addClass( 'active' );
            }
            else if ( !this.getElement('a.active') )
            {
                this.removeClass( 'active' );
            }
        }

        // Update the menu whenever the mouse move in or out the menu items
        var items = $$( '.menu li' );
        for ( var i = 0, n = items.length; i < n; i++ )
        {
            var item = items[ i ];
            item.addEvent( 'mouseover', update );
            item.addEvent( 'mouseout', update );
        }
    });
    </script>

3. In the CSS, duplicate all "li:hover" selectors to "li.active" selectors, e.g.:

 .menu ul li:hover a {...}

becomes:

 .menu ul li:hover a, .menu ul li.active a {...}

There may be bugs. But so far it works for me. wink