Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Round corner Menu in CSS

Posted on 2012-04-05
4
Medium Priority
?
728 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 1000 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 1000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

705 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