Solved

Round corner Menu in CSS

Posted on 2012-04-05
4
687 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
  • 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Set differnt row widths in a table. 3 22
Looking for magnifying glass wingding font 3 17
URGENT - Wordpress site missing  theme 9 41
Joomla 2.5 shopping cart 7 23
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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