How can I target a specific/individual menu button?

[Stinky666]

I want to target a couple actually, of specific menu buttons.
I may want 2 or 3, not sure exactly just yet. For now though, is there an easy way to target them?

It will probably help you to know why.
Using the forum wrapper and style sheets, I want do add a drop down menu (Like in the Info Center: exdat.freeforums.net/ ).
So for instance, I want to add some links to the dropdown when you hover over "Profile", so then it can reveal whatever content I add to that drop down.

All I need though, is to know how (assuming I can. Surely it's possible?) to target/select/ID specific and individual buttons.

if there is a way, could you possibly tell me them ALL?
If not all, could you at least tell me the following ones:

Forum
Profile
Members


Appreciated to anyone that can help.

[RedBassett]

They don't have unique ID's but they do have unique hrefs. You could probably just run a javascript match on those, and then if you need CSS on them, apply it via JS or use JS to apply a custom class or ID.

[Stinky666]

Apr 16, 2013 20:51:33 GMT -8 RedBassett said:

They don't have unique ID's but they do have unique hrefs. You could probably just run a javascript match on those, and then if you need CSS on them, apply it via JS or use JS to apply a custom class or ID.

Would be awesome, but unfortunately I have no idea when it comes to JS

[RedBassett]

So I wrote a quick little utility for you:

<script>
var com_rb_add_nav_classes = {
 run: function(elements) {
   var navBarElements = $('div#navigation-menu').children('ul').find('a').each(function(){
    for (var i = 0; i < elements.length; i++) {
     if ($(this).attr('href') == elements[i][0]) {
       $(this).addClass('nav-element-'+elements[i][1]);
     }
    }
   });
 }
}

com_rb_add_nav_classes.run([
['/','home'],
['/help','help'],
['/search','search']
]);
</script>

Place this in global headers. Edit each line near the bottom:
['/help','help'],

Blue: the "href" attribute of the link.
Red: the "xxxx" part of the classname: nav-element-xxxx.

For the line above, it will take all nave elements with the href of "/help", and add the class "nav-element-help".

Be sure to leave a trailing comma on all line but the last.

[Stinky666]

Firstly, thanks a bunch, however, the problem here that I see (or possibly just have no idea) is how do I put that into the div and <a href elements..?
For example, this is how I am using it and making it display in the Info center, for total online etc:
(also using css)

                                                  <td width="20%">
                                                      <b>Users Online:</b>  <a href="#" class="onlinetotal" title="$[total_staff_online] Staff, $[total_members_online] Member{if $[total_members_online] != 1}s{/if}, $[total_guests_online] Guest{if $[total_guests_online] != 1}s{/if}"><u>$[total_online]</u></a>
                                                      <br /><b>Last 24hrs:</b> <a href="#" class="onlinetotal24" title="$[total_staff_online_24] Staff, $[total_members_online_24] Member{if $[total_members_online_24] != 1}s{/if}, $[total_guests_online_24] Guest{if $[total_guests_online_24] != 1}s{/if}"><u>$[total_online_24]</u></a>
                                                      <br /><b>Most Online:</b> $[most_users_online]
                                                   </td>


[RedBassett]

If you actually want to add HTML content to inside (or beside) the button, you will need to target the button in the template ({if $[button.href] == xxx}?), or use more JS. I was under the impression you just wanted a CSS handle to grab the element via. Would you like above to allow adding content to the button? If so, inside it?

[Stinky666]

Well, using the above method (as with my IC), I was hoping to add it to the forum wrapper, for example, then when you hover the button, it drops.
I don't want anything too over my head.

Some sort of variable is what I was honestly hoping for to target each individual buttons.

[RedBassett]

By "dropdown", do you mean the title text effect on the number at left of the IC? Or is there something else I'm missing?

[Stinky666]

Apr 17, 2013 8:51:02 GMT -8 RedBassett said:

By "dropdown", do you mean the title text effect on the number at left of the IC? Or is there something else I'm missing?

Nope, that's exactly it.
I'd style/position it using CSS. I just have no idea how to make them appear for each button. Since in the forum wrapper, there is none. It's just something like "foreach button" or whatever

[RedBassett]

I can't (quickly) figure out how they styled the tooltips, but here's a new code:

I modified it to attach a title to the link, like it used to for classes. Now the second parameter in the settings will accept XXXX in title="nav-element-XXXX" for the a targeted. I also changed the namespace, so you can use this code along side the previous one.

<script>
var com_rb_add_nav_title = {
run: function(elements) {
var navBarElements = $('div#navigation-menu').children('ul').find('a').each(function(){
for (var i = 0; i < elements.length; i++) {
if ($(this).attr('href') == elements[i][0]) {
$(this).attr('title', 'nav-element-'+elements[i][1]);
}
}
});
}
}

com_rb_add_nav_title.run([
['/','home'],
['/help','help'],
['/search','search']
]);
</script>

[Stinky666]

Apr 17, 2013 8:59:12 GMT -8 RedBassett said:

I can't (quickly) figure out how they styled the tooltips, but here's a new code:

I modified it to attach a title to the link, like it used to for classes. Now the second parameter in the settings will accept XXXX in title="nav-element-XXXX" for the a targeted. I also changed the namespace, so you can use this code along side the previous one.

<script>
var com_rb_add_nav_title = {
run: function(elements) {
var navBarElements = $('div#navigation-menu').children('ul').find('a').each(function(){
for (var i = 0; i < elements.length; i++) {
if ($(this).attr('href') == elements[i][0]) {
$(this).attr('title', 'nav-element-'+elements[i][1]);
}
}
});
}
}

com_rb_add_nav_title.run([
['/','home'],
['/help','help'],
['/search','search']
]);
</script>

Hi RB. Apologize for not responding last night. I was shattered so fell asleep
I will give this a shot some time soon and let you know how I get on with it



Edit:
Ok I tried at this and failed miserably haha.

I'm not sure where to put what.
Because I want, for instance for the Admin Button when you rollover, the drop down to show lots of headings/links. Such as Themes, Headers & Footers, etc etc

So you rollover the Admin button and it displays

Themes
Headers and Footers


Each one would be a link.

<a href="#" class="" title=""></a>

Using that (and the admin as an example), how do I put it all together to work?
In my CSS I will be using this

a.MYCLASS {
 position: relative;
 text-decoration: none;
}
a.MYCLASS:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
   right: -80px;
 background: rgba(236, 236, 236,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #978787;
 font-size: .86em;
 .box-shadow(0px, 1px, 4px, @shadow_color);
}
a.MYCLASS:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(236, 236, 236,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left: -2px;
}


What do I put for Class, what to put for Title? Then do I put the other information <a href="/admin/themes">Themes</a>><br /><a href="/admin/structure/headers_footers">Headers and Footers</a>
I'm so confused and out of my depth, i think haha

[RedBassett]

I really don't know much about drop downs (and haven't written many lately). Maybe you can harness whatevefr PB uses for the "actions" menus and gear icons?

[Stinky666]

Apr 17, 2013 18:19:22 GMT -8 RedBassett said:

I really don't know much about drop downs (and haven't written many lately). Maybe you can harness whatevefr PB uses for the "actions" menus and gear icons?

I wouldn't even know where to begin haha.
Keep in mind, I know limited css and html. All from which I have learned from playing with PBv5, and nothing else.