Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Round corner Menu in CSS

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

916 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