Can some super awesome person give me some CSS help :)

ikillbears · 9 Oct 2013 at 16:45

afternoon all.

so, im trying to create a drop down menu : http://imgur.com/a/0xPyt the top is what i would like it to look like, the bottom is where ive got so far. I haven't managed to do this all on my own, im not that smart. instead of tried to bodge together some tutorials / examples.

here be my code :

Code:

#nav {
	z-index:5;
	position:relative;
	margin-left:20px;
}

#nav li {
	float: left;
	list-style: none;
	display: block;
	padding: 5px 40px;
	margin-right: 10px;
	background: #000;
	color: #FFF;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
border-radius: 15px;

margin-top:13px;
position:relative;
	
}


#nav li li {
	padding:0px 0px;
	margin-top:0px;
	border-bottom:dashed #FFFFFF thin;
	width:auto;
	
}

#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#000; /* --- CHANGE COLOUr hERE */
	text-decoration:none;
}

#nav a:hover{
	color:#fff;
	background:#000;
	text-decoration:underline;
}

#nav ul{
	background:#fff;
	background:rgba(255,255,255,0);
	list-style:none;
	position:absolute;
	left:-9999px;
}
#nav ul li {
	
    float:none;
}

#nav ul a {
	white-space:nowrap;
}

#nav li:hover ul {
	left:0;
}

#nav li:hover a {
	text-decoration:underline;
	background:#000;
}

#nav li:hover ul a {
	text-decoration:none;
}

#nav li:hover ul li a:hover {
	background:#000;
	text-decoration:underline;
}

What am i doing wrong ?? :confused:

AHarvey · 10 Oct 2013 at 00:22

Where did you get the original image from for the menu you want?

Th3M8dH8tt3r · 11 Oct 2013 at 13:18

You got Skype?

zyfar · 12 Oct 2013 at 11:51

Put it in a JSfiddle if you could mate?

roger that · 14 Oct 2013 at 06:56

Unless it's only going to be you updating the site, I would use a javascript solution instead, to avoid the "user broke it again" support call.

Anyway, I was up early due to a fox gang-bang going on outside, so I knocked up a quick solution.

http://jsfiddle.net/j3zpG/

I removed most margins and padding and other unnecessary stuff.

I think it looks better with a slightly thicker border as browsers alias this stuff badly at small unit sizes.

http://jsfiddle.net/j3zpG/1/

ikillbears · 17 Oct 2013 at 13:46

Sorry for the delayed reply gents,

I tried to do multi quote reply but for some reason it wouldn't do all of them, is there a limit ?

So any way

- I got the original image sent through to me from a designer.

- I do have skype, thank you for the offer ( i presume you meant to help

) or maybe a saucy peep show .... ?

- Wasn't aware of this JSfiddle place. thanks for the heads up. could come in useful

- That looks awesome. thanks so much mate. Its only going to be me updating it. so they can't break it. Can't thank you enough for taking the time.

many internet cookies to you!

ikillbears · 17 Oct 2013 at 14:27

ran into a slight snag. probably due to lack of brain capacity.

when trying to add the next button along it lines it up under neath instead of a horizontal line across. im probably being really stupid :/

i did this to add another one in the html http://jsfiddle.net/uBBhC/ this stuff confuses the hell out of me :/

GravyMonster · 17 Oct 2013 at 14:56

You need to make the first level of li elements float: left, and also remove the :first-child from the li:hover so that the rounded bottom corners on the subsequent top level li are removed on hover.

http://jsfiddle.net/RoryMcCrossan/QLUXC/

Code:

#nav > ul > li {
    float: left;
}

#nav li:hover {
    border-bottom: 1px dashed #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

ikillbears · 17 Oct 2013 at 16:04

Amazing. Thank you so much guys

ikillbears · 11 Nov 2013 at 20:42

hey guys, im back

so. I've discovered a problem. if there isn't a sub menu beneath the top ones it still does it as if it was. you can see it here : http://jsfiddle.net/cFM7X/ it obviously does this as I've told it too. is there something cheeky and small that i can add that will stop it doing if its just one menu button. The first / last child things mildly transformed my life

Tripnologist · 12 Nov 2013 at 08:48

Just give it a class like so.

http://jsfiddle.net/cFM7X/1/

ikillbears · 12 Nov 2013 at 11:01

Doh, of course. I'm an idiot.

Thank you!

ikillbears · 21 Nov 2013 at 11:07

Hi guys, I'm back

One last question I swear. So everything above is working awesomely so thanks so much for that. The last thing that I've realised is our good old friend mobile devices. I only have one menu that actually drops down now. However. when clicking on it it doesn't stay open on a phone as its using the :hover. So, how does one get around this little conundrum ?

GravyMonster · 21 Nov 2013 at 12:18

Use :focus

*edit*
Actually, I'm a dumbass. :focus only works on form inputs. You'll need to use javascript to mimic it, assuming your menu is made up of ul/li elements

Th3M8dH8tt3r · 21 Nov 2013 at 14:44

You could use a bit of jQuery, CSS and media query. Media query may not be necessary but basically, below certain screen width, reset your hover class back to inherit everything from it's parent. Essentially stopping it from doing anything. Obviously, the parent class currently has display:none so all you need to do is create a new class called show or something that says display:block and then with jQuery write, when menu tab is clicked on, add the class show. That way, it'll appear on the page like a normal DOM element and not have a state on it.

I think that'll work.

ikillbears · 22 Nov 2013 at 18:01

Hi Guys,

so i did some digging and i found this : http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly.

seems simple enough for an idiot like me to sort out. However, I can't seem to get it to work.

the site is currently sitting at www.inkslinger.co.uk/calibre/ From my limited knowledge i read the javascript as going. looking in the div called nav ( #nav ) If there is a li that has a ul as a child. then run the script. So why doesn't it do it :/

I've tried testing it on my phone. WP and my GF's android. and no joy

Fallen god · 23 Nov 2013 at 18:40

I looked through your source, did you add the Javascript file too the site, I can't seem to find it, and therefore it just says function not found when I run it.

http://i.imgur.com/yMOCCE8.png

ikillbears · 24 Nov 2013 at 16:59

hmmm, thats weird. I only have it on the main index page for the moment. just testing it.

this is how i have it.

to my limited knowledge, this should load it in. then activate it.

<script type="text/javascript" src="js/doubletaptogo.js"></script>
<script tpye="text/javascript">
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>

does it have to be any where specific like in the head tags or anything ?

ikillbears · 25 Nov 2013 at 21:39

shameless bump, any one have any ideas on this. It's driving me mad. I'm even trying to do media queries, which i know is probably the right way. I'm just not experienced enough to work out the css. Even trying that is driving me nuts, works in Dreamweaver but not in chrome, why the hell is that!

any way. any idea about that little bit of javascript ? would make my life less suicidal