Why will a <li><a>link</a></li> not work here?
Moderator: General Moderators
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Why will a <li><a>link</a></li> not work here?
http://tympanus.net/Blueprints/HorizontalDropDownMenu/
We are using this, as a template for a new menu.
We've alter the colours and style, but one thing we notice is you can have a menu button with no dropdown, but the Text will not hyperlink to a page.
How can this code be altered to enable particular links to go to pages?
We are using this, as a template for a new menu.
We've alter the colours and style, but one thing we notice is you can have a menu button with no dropdown, but the Text will not hyperlink to a page.
How can this code be altered to enable particular links to go to pages?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
http://jsfiddle.net/xC47v/3/
Someone has said this works, but they have failed to put a URL into the hyperlink to prove it.
When I do this, it doesn't work.
Show do I get a hyperlink to work on here, while the other dropdowns still work?
Someone has said this works, but they have failed to put a URL into the hyperlink to prove it.
When I do this, it doesn't work.
Show do I get a hyperlink to work on here, while the other dropdowns still work?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Why will a <li><a>link</a></li> not work here?
http://jsfiddle.net/xC47v/6/
Note the example isn't working on the Fiddle itself, but works fine elsewhere.
Note the example isn't working on the Fiddle itself, but works fine elsewhere.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
Have a look at the attached - see if you can get Googel to work, the other menus to dropdown and send back, or just tell me the little bits you adjusted to fix.
As I'm stumped!
As I'm stumped!
- Attachments
-
- HorizontalDropDownMenu.rar
- This is the full version I have made, with a google link and it fails.
- (14.31 KiB) Downloaded 538 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Why will a <li><a>link</a></li> not work here?
You didn't incorporate the changes I had posted on jsFiddle. You modified the $menuItems selector from 'a' to 'a.dropdown', which doesn't exist. You were making changes do your cbpHorizontalMenu.js file while the index file was still pointing to the .min.js version. You added an unnecessary closure to the JS file (that wasn't being called) that would have run the whole thing twice. I have attached a version with all requisite fixes.
- Attachments
-
- horizontal-nav.zip
- (16.71 KiB) Downloaded 518 times
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
You genius. I still am not exactly sure where I messed it, but it's perfect now.
While you are on - do you happen to see a way to make the "wide" black DIV stay inside a container "innerbox" of the page?
It resides in a innerbox that is:
950px wide
Margin left auto
margin right auto.
I know it's designed to be nice on mobile, but I am sure I can alter any setting needed for mobile. The thing is, we use a wide background image and it covers it. would be nice if it was inside "innerbox"....?
While you are on - do you happen to see a way to make the "wide" black DIV stay inside a container "innerbox" of the page?
It resides in a innerbox that is:
950px wide
Margin left auto
margin right auto.
I know it's designed to be nice on mobile, but I am sure I can alter any setting needed for mobile. The thing is, we use a wide background image and it covers it. would be nice if it was inside "innerbox"....?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Why will a <li><a>link</a></li> not work here?
There's no black div on mine that I can see. Assuming you mean the submenu container div, just add the following rule:
Code: Select all
.cbp-hrsub {
max-width: 900px;
}-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
Apologies. I've altered all the colouring.
For your sake, let's say the dark blue div.
If you do this:
It shoves over to the left.
For your sake, let's say the dark blue div.
If you do this:
Code: Select all
.cbp-hrmenu {
width: 100%;
}
.cbp-hrsub {
max-width: 950px;
margin-left: auto;
margin-right: auto;
}Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Why will a <li><a>link</a></li> not work here?
It's absolutely positioned, so you need to set relative positioning on .container
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
Perfect. Tho now (and before actually) when you click on a menu, the submenu expands in mobile and pushes it all out.
Seeing as it's "max-width", I didn't think that would happen.
I don't recall setting any odd widths on the inner areas.
Seeing as it's "max-width", I didn't think that would happen.
I don't recall setting any odd widths on the inner areas.
Code: Select all
.container
{
position: relative;
}
.cbp-hrmenu {
width: 100%;
}
.cbp-hrsub {
max-width: 950px;
margin-left: auto;
margin-right: auto;
}
/* general ul style */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menulink {
font-family: impact, arial;
text-transform: uppercase;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
display: inline-block;
}
.menulink:hover {
color: #ff5500;
}
/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
max-width: 75em;
margin: 0 auto;
padding: 0 1.775em;
}
.cbp-hrmenu > ul > li {
display: inline-block;
background-color: #5F5F5F;
}
.cbp-hrmenu > ul > li > a {
font-weight: normal;
padding: 0.6em 1em;
color: #999;
display: inline-block;
text-decoration: none;
font-family: impact, arial;
text-transform: uppercase;
font-size: 18px;
color: #ffffff;
}
.cbp-hrmenu > ul > li > a:hover {
color: #ff5500;
}
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: #fff;
background: #000000;
}
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #000000;
opacity: 0.87;
width: 100%;
left: 0;
}
.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 28%;
float: left;
padding: 0 0.6em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}
.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
}
.cbp-hrsub h4 {
color: #afdefa;
padding: 0.6em 0 0.0em;
margin: 0;
font-size: 110%;
font-weight: normal;
}
/* Examples for media queries */
@media screen and (max-width: 52.75em) {
.cbp-hrmenu {
font-size: 80%;
}
}
@media screen and (max-width: 43em) {
.cbp-hrmenu {
font-size: 120%;
border: none;
}
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}
.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}
.cbp-hrmenu > ul > li {
display: block;
border-bottom: 1px solid #000000;
}
.cbp-hrmenu > ul > li > a {
font-size: 17px;
display: block;
padding: 0.5em 1em;
}
.cbp-hrmenu .cbp-hrsub {
position: relative;
}
.cbp-hrsub h4 {
padding-top: 0.6em;
}
}
@media screen and (max-width: 36em) {
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
Fixed - I'd removed the link to default.css.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
-
simonmlewis
- DevNet Master
- Posts: 4435
- Joined: Wed Oct 08, 2008 3:39 pm
- Location: United Kingdom
- Contact:
Re: Why will a <li><a>link</a></li> not work here?
Can you see in the CSS how to get the menu to be left aligned in the menu or container div. I've tried text-align: left, etc, but nothing seems to work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.