it's working as intended!!!
<li class="web2py-menu-last highlight"><a
href="/highlight/default/menu2">Menu2</a></li>
is what it becomes when you access the menu2 link.
You just need to play with the css now...
By default the "home" link is constructed with a
SPAN('Home', _class='highlighted')
that is inside the A link.
if you don't want to play with the css you should build your A with the
same logic
response.menu = [
(SPAN('Home'), False, URL('default', 'index'), []),
(SPAN('Menu1'), False, URL('default', 'menu1'), []),
(SPAN('Menu2'), False, URL('default', 'menu2'), [])
]
and then modify the javascript snippet a bit
var path = location.pathname.substring(1);
if ( path ) jQuery('ul.nav
a[href$="'+path+'"]').find('span').addClass('highlighted');
the logic step-by-step is more or less the same as before but
find('span') now searches within the A instead of going on level up
the class added is "highlighted" and not "highlight"
if instead you don't want to use SPAN inside the menu elements, retain the
previous javascript snippet and add this css rule
ul.nav li.highlight a {
color: #D8D800;
}
of course you should at least turn the first element of the menu to match
the others, so
response.menu = [
(T('Home'), False, URL('default', 'index'), []),
(T('Menu1'), False, URL('default', 'menu1'), []),
(T('Menu2'), False, URL('default', 'menu2'), [])
]
would be needed.
On Tuesday, May 7, 2013 11:41:48 PM UTC+2, Omi Chiba wrote:
>
> I created new app called highlight. Can you take a look?
>
> 1. Added your javascript code right before </head> tag
> 2. Modifiled response.menu in menu.py
>
> response.menu = [
> (SPAN('Home', _class='highlighted'), False, URL('default', 'index'),
> []),
> (T('Menu1'), False, URL('default', 'menu1'), []),
> (T('Menu2'), False, URL('default', 'menu2'), [])
> ]
>
> 3. created empty control and view for menu1 and menu2.
>
>
> On Tuesday, May 7, 2013 3:07:49 PM UTC-5, Niphlod wrote:
>>
>> well, that is a snippet that needs to be adjusted to the menu classes in
>> your layout ....
>>
>> the point more or less is: you have a "menu" that has no children....
>> changing the highlight on the clicked one leaves you nowhere, cause once a
>> link has been clicked you jump to the other page, so the second snippet is
>> the only one where the functionality actually works (i.e. applying a
>> different style on the page the user is in).
>> To do that, you must assign the class looking at where the page "stands",
>> that is location.pathname.
>> jQuery has a nice selector syntax where anything that is prefixed with $
>> means "that ends with this string".
>> So, assuming you are using the scaffolding app from trunk .....
>>
>> <script>
>> jQuery(function() {
>> var path = location.pathname.substring(1);
>> if ( path ) jQuery('ul.nav a[href$="'+path+'"]').closest('li').addClass
>> ('highlight');
>> })
>> </script>
>>
>> works
>>
>> The broken-down functionality is:
>> - path is the current url
>> - please, find all A elements within the <ul class="nav"> ( *jQuery(ul.nav
>> a)*)
>> - filter this set searching for the ones that have an href ending with
>> the current location (i.e. the url of the page) *[href=$whatever]*
>> - go up in the DOM until you find a li (*closest(li)*)
>> - add a hihglight class (*addclass(highlight)*)
>>
>>
>> On Tuesday, May 7, 2013 6:24:19 PM UTC+2, Omi Chiba wrote:
>>>
>>> Niphlod , thank you for the reply!
>>>
>>> Can you provide me actual code workis on new app?
>>> I'm not sure where I should put the javascript and what value should I
>>> specify for 'all a in the menu'.
>>>
>>> On Tuesday, May 7, 2013 11:05:27 AM UTC-5, Niphlod wrote:
>>>>
>>>> javascript ......
>>>>
>>>> something like
>>>>
>>>> $('all a in the menu').click(function(e) {
>>>> $('all a in the menu').removeClass('highlighted');
>>>> $(this).addClass('highlighted');
>>>> })
>>>>
>>>> should work .
>>>>
>>>> You can even generalize it to highlight the current page url
>>>> automatically.
>>>>
>>>> var path = location.pathname.substring(1);
>>>> if ( path ) $('all a in menu[href$="' + path + '"]').closest('li').
>>>> addClass('highlight');
>>>>
>>>>
>>>>
>>>> Il giorno martedì 7 maggio 2013 17:56:10 UTC+2, Omi Chiba ha scritto:
>>>>
>>>>> I have a following response.menu in my menu.py. By default Home is
>>>>> highlighted but I want to highlight the menu clicked by the user. For
>>>>> example, when user click contact, 'highlighted' class should be added to
>>>>> contact and removed from home.
>>>>>
>>>>> response.menu = [
>>>>> (SPAN('Home', _class='highlighted'), False, URL('default',
>>>>> 'index'), []),
>>>>> (T('Order Status'), False, URL('default', 'orderstatus'), []),
>>>>> (T('Q&A'), False, URL('default', 'qa'), []),
>>>>> (T('Contact'), False, URL('default', 'contact'), [])
>>>>> ]
>>>>>
>>>>
--
---
You received this message because you are subscribed to the Google Groups
"web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
