Page 1 of 1

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

Posted: Fri Sep 12, 2014 11:16 am
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?

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

Posted: Fri Sep 12, 2014 11:36 am
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?

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

Posted: Fri Sep 12, 2014 12:16 pm
by Celauran
http://jsfiddle.net/xC47v/6/

Note the example isn't working on the Fiddle itself, but works fine elsewhere.

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

Posted: Fri Sep 12, 2014 1:00 pm
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!

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

Posted: Fri Sep 12, 2014 2:04 pm
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.

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

Posted: Fri Sep 12, 2014 2:18 pm
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"....?

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

Posted: Fri Sep 12, 2014 2:43 pm
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;
}

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

Posted: Fri Sep 12, 2014 3:28 pm
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.

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

Posted: Fri Sep 12, 2014 3:51 pm
by Celauran
It's absolutely positioned, so you need to set relative positioning on .container

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

Posted: Fri Sep 12, 2014 4:26 pm
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;
	}
}

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

Posted: Mon Sep 15, 2014 4:31 am
by simonmlewis
Fixed - I'd removed the link to default.css.

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

Posted: Mon Sep 15, 2014 4:41 am
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.