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

ikillbears

ikillbears

ikillbears

Soldato
Joined
5 Feb 2006
Posts
3,524
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: :mad: :)
 
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. :p

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/
 
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 :P ) 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!
 
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 :/
 
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;
}
 
Last edited:
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 :)
 
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 ?
 
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
 
Last edited:
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.
 
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 :(
 
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 ?
 
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
 
You must log in or register to reply here.
Back
Top Bottom