I've got the reds!! (CSS menu)

[Grammy]

I was starting to overcrowd my menu section, so I batched all the "extras" together under one menu tab:  "Extra Goodies".  It's working fine, but I do have a couple of questions.  First, in Subs.php:

I didn't want anything to happen if a user clicked "Extra Goodies"; I wanted them to have to see the drop-down before choosing.  So, I put 'javascript:void(0)' for 'href'.  Is that okay, or is that something that's not done anymore?  It does work fine (even with IOS) and throws no errors, but I don't want it to someday just stop working because it's deprecated.   

Code Select Expand

'goodies' => array(
'title' => $txt['goodies'],
'href' => 'javascript:void(0)',
'show' => !$user_info['is_guest'],
'sub_buttons' => array(
    'breaking' => array(
'title' => $txt['breaking_feed'],
'href' => $scripturl . '?page=news',
'show' => !$user_info['is_guest'],
),
'showing' => array(
'title' => $txt['now_showing'],
'href' => $scripturl . '?page=movies',
'show' => !$user_info['is_guest'],
),
'weather' => array(
'title' => $txt['weather'],
'href' => $scripturl . '?page=weather',
'show' => !$user_info['is_guest'],
),
),
),

The other question is cosmetic (attached jpg).  I wanted the "Extra Goodies" tab to be red but I wanted the drop-down choices to remain black.  I "borrowed" the CSS from elsewhere in index.css, in order to have all the highlighting, etc., that the other buttons have (otherwise, it's just a plain, undecorated button) and the red color comes from here:

Code Select Expand

/* Customized Extra Goodies Button
------------------------------------------------------- */
#button_goodies a {
color: #ff0000;
cursor: pointer; }

#button_goodies ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
#button_goodies ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#button_goodies ul li a
{
display: block;
font-size: 0.8em;
color: #ff0000;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
#button_goodies ul li a:hover
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;
}
#button_goodies ul li a span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
#button_goodies ul li a:hover span
{
background: #fff url(../images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
#button_goodies ul li a.active
{
background: #5a6c85 url(../images/theme/menu_gfx.png) no-repeat 0 -90px;
color: #fff;
font-weight: bold;
}
#button_goodies ul li a.active span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -90px;
}
#button_goodies ul li a.active
{
font-weight: bold;
}
#button_goodies ul li a.active:hover
{
color: #ddf;
}

If I remove either of those #ff0000; values, then the main tab is black again.  If I leave them both, the drop-downs are red.
What's a girl to do?   

[Grammy]

Actually, I've sorted it to something I can live with.  I'm not one to sit by and wait; I have to TINKER!   

Solved; nothing to see here.   

[Antechinus]

So what did you come up with? If you're curious, the reason things were either all black or all red is that declaring like that will target the descendents.

The #button_stuff id is for the top level li, and #button_goodies ul is the drop menu under the top level tab. So declaring red in #button_goodies ul li a should not affect the top level. If it does, something is borked somewhere else.

#button_goodies a will target not just the anchor in the top level, but will also hit all descendant anchors in sub-menus. If you want it to only hit the top level you'd use #button_goodies>a since the > tells it to only hit stuff which is directly inside the first thing.

And this reminds me of how effing poxy 2.0.x CSS is. Horrible stuff.

(it frequently suffers from overly specific declarations, and sometimes has duplicates as well)

[Grammy]

So what did you come up with? If you're curious, the reason things were either all black or all red is that declaring like that will target the descendents.

The #button_stuff id is for the top level li, and #button_goodies ul is the drop menu under the top level tab. So declaring red in #button_goodies ul li a should not affect the top level. If it does, something is borked somewhere else.

#button_goodies a will target not just the anchor in the top level, but will also hit all descendant anchors in sub-menus. If you want it to only hit the top level you'd use #button_goodies>a since the > tells it to only hit stuff which is directly inside the first thing.

And this reminds me of how effing poxy 2.0.x CSS is. Horrible stuff.

(it frequently suffers from overly specific declarations, and sometimes has duplicates as well)

What I came up with was to learn to like red!   

Well...  I've got this in Subs.php:

Code Select Expand

'goodies' => array(
'title' => $txt['goodies'],
'href' => 'javascript:void(0)',
'show' => !$user_info['is_guest'],
'sub_buttons' => array(
    'breaking' => array(
'title' => $txt['breaking_feed'],
'href' => $scripturl . '?page=news',
'show' => !$user_info['is_guest'],
),
'showing' => array(
'title' => $txt['now_showing'],
'href' => $scripturl . '?page=movies',
'show' => !$user_info['is_guest'],
),
'weather' => array(
'title' => $txt['weather'],
'href' => $scripturl . '?page=weather',
'show' => !$user_info['is_guest'],
),
),
),

And also this: 

Code Select Expand

if(isset($_REQUEST['action']) && strpos($_REQUEST['action'], '@page=news') !== false)
$current_action = 'breaking';
if(isset($_REQUEST['action']) && strpos($_REQUEST['action'], '@page=movies') !== false)
$current_action = 'showing';
if(isset($_REQUEST['action']) && strpos($_REQUEST['action'], '@page=weather') !== false)
$current_action = 'weather';
// --- start goodies
elseif ($context['current_action'] == 'goodies')
$current_action = 'breaking';
// --- end goodies

(Only those three "if isset" bits were when the buttons were all single menu buttons.  I wasn't sure if I should lose them, so I left them, since they didn't seem to do any harm.)

My Modifications.english.php is this:

Code Select Expand

//custom menu
$txt['goodies'] = 'Extra Goodies!';
$txt['breaking_feed'] = 'Breaking News';
$txt['now_showing'] = 'Now Showing!';
$txt['weather'] = 'Local Weather';

So, since I wanted "Extra Goodies!" to be red, but still wanted the highlight to work, I have this in my CSS:

Code Select Expand

/* Customized Extra Goodies Button
------------------------------------------------------- */
#button_goodies a {
color: #ff0000;
cursor: pointer; }
#button_goodies ul li a:hover
{
color: #fff;
text-decoration: none;
}
#button_goodies ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
#button_goodies ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}


But that's wrong; since everything's still red (attached). What I'm after is "Extra Goodies" being red, but the drop-down being black, white on hover.  (Don't mind the squirrels; they're mostly harmless.) 

All that to ask...  the button being "goodies" can you see the the Bork?   

[Antechinus]

Yeah. Bork is here.

Code Select Expand

#button_goodies a {
color: #ff0000;
cursor: pointer; }

Like I said, try this:

Code Select Expand

#button_goodies>a {
color: #ff0000;
cursor: pointer; }

Or if you want it another way...

Code Select Expand

#button_goodies>.firstlevel {
color: #ff0000;
cursor: pointer; }

...should also work.

But you probably don't need the pointer bit, since IIRC all browsers do pointer on links by default.

[Grammy]

This fixes it!   

Code Select Expand

#button_goodies>a {
color: #ff0000;
cursor: pointer; }

Really, that ">" changes everything?  I've never seen that in CSS before; I'm impressed!   

I'm gonna start following you around, so I can feel smarter.   

Thanks, big time!

[Antechinus]

Yup, the > means "only apply this to anchors which are directly inside #button_goodies". So <li id="#button_goodies"><a>Stuff</a></li> gets hit.

If you just leave a space (like #button_goodies a) that means "apply this to any anchors which are directly inside #button_goodies, and any anchors which are inside anything else that is inside #button_goodies".  So <li id="#button_goodies"><ul><li><a>More stuff</a></li></ul></li> gets hit too.

[Grammy]

Yup, the > means "only apply this to anchors which are directly inside #button_goodies". So <li id="#button_goodies"><a>Stuff</a></li> gets hit.

If you just leave a space (like #button_goodies a) that means "apply this to any anchors which are directly inside #button_goodies, and any anchors which are inside anything else that is inside #button_goodies".  So <li id="#button_goodies"><ul><li><a>More stuff</a></li></ul></li> gets hit too.

That's incredible; I had no idea.  I need to go CSS-manual surfing and find out what's changed; I'm still mucking about with old stuff.  It's a wonder all my sites haven't gone belly-up.  You guys are a lot more helpful than Stackoverflow (and a lot less anal), ha! 

(Okay, that's just an opinion; if anyone here works for Stackoverflow, I'm sure I don't mean YOU.)