navbar w rounded corners (CSS only) [Sitemap] - Digital Grin Photography Forum

View Full Version : navbar w rounded corners (CSS only)

ivar

Sep-03-2006, 04:30 AM

I've been looking at navbars for a while, trying to create one with rounded corners, without the need for images and photoshopping etc. All the ones i found on the net were okay, but had some sort of limitation. So, with the basis of one of the CSS hero Stu Nicholls' (http://www.cssplay.co.uk) code, i came up with this.

It's a centered, 4 rounded corners navbar that changes color on hover. It works in IE6, FF, Flock, Opera, and if someone could check the MAC ones, i would appreciate it.

You can see it in action here (http://ivar.smugmug.com).

There is quite a bit of code, but you can copy/paste it all, and then change a few things so it works for you.

the HTML: <div id="menu_rounded">
<ul>

<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK1

</a>
</li>

<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK2

</a>
</li>

<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK3

</a>
</li>

<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK4

</a>
</li>

<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK5

</a>
</li>

<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK6

</a>
</li>

</ul>
</div>
The green stuff is where the links to the appropriate pages go.
The blue stuff is where the word(s) that appear on the button go

the CSS: /* GENERAL */
#menu_rounded {
display: table;
margin: 0 auto;
padding: 1em; /* the padding around the menu itself */
background: transparent;
white-space: nowrap;
}

* html #menu_rounded {
display: inline-block;
width: 1px;
padding: 0 2px;
}

#menu_rounded ul {
display: table;
margin: 0 auto;
height: 1%;
padding: 0;
list-style-type: none;
background: transparent;
}

#menu_rounded li {
display: table-cell;
padding: 0;
padding-right: .3em; /* the padding on the right of the buttons */
padding-left: .3em; /* the padding on the left of the buttons */
}

* html #menu_rounded li {
display: inline;
}

.menu_button {
background:transparent;
}

.menu_button span {
text-align:center;
color:#ffffff; /* the color of the text on the buttons */
margin:0;
font-weight:normal;
}

/* BOX-LAYOUT */

.xtop {
display: block;
background: transparent;
font-size: 1px;
}

.xb1, .xb2, .xb3, .xb4 {
display:block;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

.xb1, .xb2, .xb3 {height:1px;}

.xb2, .xb3, .xb4 {
background: #660000; /* the color of the background */
border-left:1px solid #fff; /* the color of the border */
border-right:1px solid #fff; /* the color of the border */
}

.xb1 {
margin:0 5px;
background:#fff; /* the color of the border */
}

.xb2 {
margin:0 3px; border-width: 2px;
}

.xb3 {
margin:0 2px;
}

.xb4 {
margin: 0 1px; height: 2px;
}

.xboxcontent {
display:block;
background:#660000; /* the color of the background */
border-right: 1px solid #fff; /* the color of the border */
border-left: 1px solid #fff; /* the color of the border */
}

/* LINKS */
a.xmenu2,
a.xmenu2:visited {
display:block;
text-decoration:none;
width:9em; /* the width of the buttons, can also be given in 'px'. Examples: width: 20px; */
font-size:0.8em;
}

* html a.xmenu2,
* html a.xmenu2:visited {
display:inline-block;
margin: 0 0px;
}

a.xmenu2:hover {
background:transparent;
cursor:pointer;
}

a.xmenu2:hover span {
color:#660000; /* the color of the words in the menu on hover */
}

a.xmenu2:hover .xboxcontent,
a.xmenu2:hover .xtop {
background:#ffffff; /* the color of the background on hover */
border-color:#660000; /* the color of the border on hover */
}

a.xmenu2:hover .xb1 {
background: #660000; /* the color of the border on hover */
}

a.xmenu2:hover .xb2,
a.xmenu2:hover .xb3,
a.xmenu2:hover .xb4 {
background:#ffffff; /* the color of the background on hover */
border-color:#660000; /* the color of the border on hover */
}
All the yellow stuff is explanation

Because the way it is written, all the colornumbers that i have given the same color in this example need to be the same. (well they don't need to be, but you can get some very interesting buttons if they are not :)
So, all the purple stuff has to be the same, all the red stuf, all the green stuff and all the orange stuff.

If you want to add a button, you can copy/paste a whole section with the li tag:
<li>
<a class="xmenu2" href="http://nickname.smugmug.com/#">

LINK2

</a>
</li> the same goes for removing a button.

Comments, suggestions and improvements very welcome.

Andy

Sep-03-2006, 04:37 AM

Sweet!

looks great in FF Mac and Safari, no probs that I can tell.

Mike Lane

Sep-03-2006, 08:25 AM

Nice, kind of a mountain top corners look. :thumb You could antialias it :wink Let me search for my link on that...

Mike Lane

Sep-03-2006, 09:04 AM

Nice, kind of a mountain top corners look. :thumb You could antialias it :wink Let me search for my link on that...meh...

I thought this article (http://www.webreference.com/programming/css_borders/index.html) had something in it that it doesn't. Nevermind :dunno

brandofamily

Sep-04-2006, 04:06 AM

ivar

Sep-05-2006, 10:28 AM

The outcome of this code is great. If you check out my site you'll see I have a CSS dropdown menu based on Stu's creation...
I've read thru your code but I'm not sure how the corners are achieved...
Could you look at my code and advise me on how I can implement your round corners to my drop menu?
I'd like to round off all the boxes (including the drops) but only put space between the main nav bar boxes....
I think spaces betwenn the drops would cause problems...
ThanksBasicly it's putting alot of boxes with different widths on top of eachother, sorta. I think it's going to be a heck of a job to redo your whole code to get rounded corners on a drop down. Also, i think it's going to look funny having 4 rounded corners on all dropdowns... Maybe you want to look at having the top 2 rounded on the upper box, and the lower 2 on the bottom box?

brandofamily

Sep-05-2006, 10:51 AM

Basicly it's putting alot of boxes with different widths on top of eachother, sorta. I think it's going to be a heck of a job to redo your whole code to get rounded corners on a drop down. Also, i think it's going to look funny having 4 rounded corners on all dropdowns... Maybe you want to look at having the top 2 rounded on the upper box, and the lower 2 on the bottom box?

Sounds way too complicated... Maybe if I get the desire I will attempt to use images for the boxes.... Thanks...

Dalantech

Sep-05-2006, 09:06 PM

Thanks Ivar -bookmarked :thumb

jesC

Jan-21-2012, 08:13 AM

I am sooo new, and I found a code for a drop down navbar that I like, and I have spent some time changing the colors and getting it the way I want.. Here are some things that I would LOVE to be able to do:

Round the Corners
Center the Drop downs

I would love love love to have my drop-downs look like hers: http://www.stacksofphotos.com/

Here is what mine look like right now: http://studio712.smugmug.com/

I haven't added many galleries yet (because i don't know how), and I haven't linked anything from my navbar: Just hoping to get the "look" right first.

I am still on my 14 day trial... Definitely going pro if I can get this to work without having to hire someone..

Do I need to share my code for some help?

Smug Eric

Jan-23-2012, 12:33 PM

It looks like you got the rounded menu up and running. Did you still need help with it?

Allen

Jan-23-2012, 12:48 PM

It looks like you got the rounded menu up and running. Did you still need help with it?
In this thread, we still haven't perfected the button spacing for the drops.
http://www.dgrin.com/showthread.php?p=1729432#post1729432
Tried all kinds of things like adding hidden buttons so the drop is continuous. But IE still not quite working.