Solved

Round corner Menu in CSS

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now