Why will a <li><a>link</a></li> not work here?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
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?

Post by simonmlewis »

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?
Love PHP. Love CSS. Love learning new tricks too.
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?

Post by simonmlewis »

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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Why will a <li><a>link</a></li> not work here?

Post by Celauran »

http://jsfiddle.net/xC47v/6/

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?

Post by simonmlewis »

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!
Attachments
HorizontalDropDownMenu.rar
This is the full version I have made, with a google link and it fails.
(14.31 KiB) Downloaded 539 times
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Why will a <li><a>link</a></li> not work here?

Post by Celauran »

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?

Post by simonmlewis »

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"....?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Why will a <li><a>link</a></li> not work here?

Post by Celauran »

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?

Post by simonmlewis »

Apologies. I've altered all the colouring.
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;
}
It shoves over to the left.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Why will a <li><a>link</a></li> not work here?

Post by Celauran »

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?

Post by simonmlewis »

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.

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.
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?

Post by simonmlewis »

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.
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?

Post by simonmlewis »

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.
Post Reply