Solved

Round corner Menu in CSS

Posted on 2012-04-05
4
721 Views
Last Modified: 2012-04-06
See attached image.

I can make a round corner menu in css no problem.  The menu is a standard <ul><li><a> menu in html.  But how can I create round corner hover effects like in my attached image without using java?

if I use first & last child conditional selectors then I loose IE support.  Can someone help me do this in CSS with IE 8+ support?

I'm thinking that I may have to have a separate sheet for IE without round corner hover effects.  Please help.

thanks,

HNM
sample.jpg
0
Comment
Question by:HelpNearMe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37813992
for all modern browser:

border-top-left-radius: 9px;
border-top-right-radius: 9px;

Open in new window


For IE8 not going to happen unless you find some hack using images and that may require javascript.
Given the low impact of the effect, it is not worth wasting time trying to find an ie8 solution.  I doubt you will get any fewer visitors because IE8 shows square corners.

Cd&
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 37814009
so for your selector just use:

ul li a:hover {border-top-left-radius: 9px;
                    border-top-right-radius: 9px;}

ul li a:link   {border-top-left-radius: 0px;
                    border-top-right-radius: 0px;}
                                           
Cd&
0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 250 total points
ID: 37814249
I actually use would recommend using Javascript (don't confuse it with Java), because you can make it works in all browsers even in IE6. You just add a class first and last class with Javascript and just those for the left and right side and i also added a hover class, it's more bulletproof than using CSS3, i'm made an example what i mean only without images, i can make it with images if you need it. Here is live example i made where i make use of that same technique because i need IE6 support too http://www.lg.com/nl/B2B/airco.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>templates</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".nav li").first().addClass('first');
				$(".nav li").last().addClass('last');
				$(".nav li").addClass('hover')
				}, function() {
					$(this).removeClass('hover')
				})
			});

		</script>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">Test</a>
			</li>
			<li>
				<a href="#">Test</a>
			</li>
			<li>
				<a href="#">Test</a>
			</li>
			<li>
				<a href="#">Test</a>
			</li>
			<li>
				<a href="#">Test</a>
			</li>
		</ul>
	</body>
</html>

Open in new window


Give it a try!
0
 

Author Closing Comment

by:HelpNearMe
ID: 37816486
great thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question