Forum Support

Shape 5
July 26, 2021, 03:52:47 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
   Home   Help Search Login Register  
Pages: [1]
Author Topic: Sensible way to make the a element of FlexMenu li clickable for full width ?  (Read 264 times)
Jr. Member
Offline Offline

Posts: 14

« on: August 01, 2013, 01:01:46 PM »

Having brain fade (it's been a long day Smiley ) but I can't seem to make this behave.

The `active` clickable part of an S5FlexMenu list item only extends the width of the span containing the onclick.
i.e. only extends the length of the text contained, not the full menu width.
I want it to be the full width of the item, as if it was a `normal` a href.



Red part is what's currently clickable, blue is what I *want* to be clickable as well.

The menu contains items of differing lengths - some 25 chars, some 5 chars.  It obviously isn't ideal to have 20 characters worth of unclickable space on the end of the shorter entries.

Tried a whole variety of things but currently the only one that seems to semi-work is a nasty hacky thing. I'm setting :-
.S5_submenu_item .s5_sub_a_span {
margin-right: 85%;
but that only really behaves in Chrome.  In IE/Firefox it messes up positioning/flow of any menu items that have graphics as well as text.

Any suggestions on how to proceed more sensibly ?
Offline Offline

Posts: 28743

« Reply #1 on: August 01, 2013, 01:42:51 PM »


It actually can't be that way, it's because of the onclick functionality used for touch screen devices. The text and the arrow section need to be separated so that when a user clicks the text it opens the link and when a user clicks the arrow it opens the menu. It's built directly into the flex menu script to perform this way, altering that would require a large amount of customizing. You might be able to adjust the paddings on the <a> but that would probably remove the arrow for sub menus.

Mike Knott
Shape 5 Team

- Need a great host for your website? We highly recommend!

- Put your trust in the hands of our extremely qualified staff to get your job done right!

- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Jr. Member
Offline Offline

Posts: 14

« Reply #2 on: August 01, 2013, 04:01:00 PM »

Ah - I suspected it was going to be something like that.  I was hoping for some easyish way of extending the span until, say, a fixed width from an expansion arrow.

Never mind.

I'll try playing around with extending the shorter item names with whitespace and letting  a{white-space:pre;} do it's thing.

Hopefully breadcrumbs will play nice and let me make it ignore the excess spaces  Wink
Pages: [1]
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.