/    Sign up×
Community /Pin to ProfileBookmark

Where did I click?

Copy linkTweet thisAlerts:
Dec 13.2016

I have a css based menu, based on lists (ul and li elements). The clickable texts are embedded in those li elements. To have space in the dropdown menu those li elements define a large padding.

My problem is that those paddings are not clickable and I would like to make them so.

My first instinct was to give this menu as a whole an onclick function and then to sort it out that I when I clicked on a padding surrounding a link I should behave as if I clicked that link. Unfortunately when I catch the element with “onclick=menuhandle(this)” that ‘this’ leads to the menu as a whole and not to the specific button from the menu that I click.

Any suggestion would be welcome.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@cootheadDec 13.2016 — Hi there musicmaster,

[indent]

without seeing the actual HTML and CSS that you are using,

it is very difficult to give you a precise solution. :eek:

Though, if you just need space between the links then you

should use margin rather than padding for the li elements.

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@musicmasterauthorDec 24.2016 — Hi there musicmaster,

[indent]

without seeing the actual HTML and CSS that you are using,

it is very difficult to give you a precise solution. :eek:
[/QUOTE]

Sorry for the late reply. Some other business took my time.

The main code looks as follows
[CODE]<ul class="navi">
<li><a href="product-edit.php">Product Edit</a>
<ul>
<li><a href="product-edit.php">Product Edit</a></li>
<li><a href="combi-edit.php">Combination Edit</a></li>
<li><a href="image-edit.php">Image Edit</a></li>
</ul>
</li>[/CODE]

The CSS is as follows:
[CODE].navi {
background: #2c82c9;
width: 100%;
padding-left: 0;
margin-bottom: 13px;
margin-top: 0;
}
.navi ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul.navi li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 13px 21px;
background: #2969b0;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

ul.navi li.menuimg {
padding: 0;
margin-right: 0;
width:137px;
}

ul.navi li a {
display: block;
color: #fff;
text-decoration: none !important;
}
ul.navi li:hover {
background: #f37934;
color: #fff;
}
ul.navi li ul {
padding: 0;
position: absolute;
top: 44px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s;
z-index: 1000;
}
ul.navi li ul li {
background: #28324e;
display: block;
color: #fff;
}
ul.navi li ul li:hover { background: #f37934; }

ul.navi li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}[/CODE]

My problem is that this produces illogical behavior in the submenu entries (like "image edit" in the sample code). In the whole block you see the cursor as a hand. However, only clicking the text itself brings you to the next page. In the rest of the block nothing happens when you click. I would like to see a reaction in the whole block.
Copy linkTweet thisAlerts:
@cootheadDec 24.2016 — Hi there musicmaster,

[indent]

try this corrected CSS...

[color=navy]
.navi {
background: #2c82c9;
/*width: 100%;*/
padding-left: 0;
margin-bottom: 13px;
margin-top: 0;
list-style: none;
}

.navi ul {
/*text-align: left;*/
/*display: inline;*/
/*margin: 0;*/
/*padding: 15px 4px 17px 0;*/
/*list-style: none;*/
}

ul.navi li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
/*padding: 13px 21px;*/
background: #2969b0;
/*cursor: pointer;*/
/*-webkit-transition: all 0.2s;*/
/*-moz-transition: all 0.2s;*/
/*-o-transition: all 0.2s;*/
transition: all 0.2s;
}

ul.navi li.menuimg {
padding: 0;
margin-right: 0;
width:137px;
}

ul.navi li a {
display: block;
padding: 13px 21px;
color: #fff;
text-decoration: none /*!important*/;
}
ul.navi li:hover {
background: #f37934;
color: #fff;
}
ul.navi li ul {
padding: 0;
position: absolute;
top: 44px;
left: 0;
width: 150px;
display: none;
/*opacity: 0;*/
/*visibility: hidden;*/
transition: opacity 0.2s;
z-index: 1000;
}
ul.navi li ul li {
background: #28324e;
display: block;
color: #fff;
}

ul.navi li ul li:hover {
background: #f37934;
}

ul.navi li:hover ul {
display: block;
/*opacity: 1;*/
/*visibility: visible;*/
}[/color]

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@musicmasterauthorDec 25.2016 — Hi Coothead,

It works! Thanks!

musicmaster
Copy linkTweet thisAlerts:
@cootheadDec 25.2016 — [indent]

No problem, you're very welcome. ?

[/indent]

[i]coothead[/i]
×

Success!

Help @musicmaster spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...