PDA

View Full Version : Chrome Style menu question for editting



pratik
01-04-2006, 11:00 AM
hey m using the chrome menu (http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm#theme)for my site... itz one on the best menu i have seen.. and i need some editting help in it...

http://img389.imageshack.us/img389/4108/untitled11sf.gif

1. i need to remove tht divider from the end... how do it do tht..
2. i want rounded edges for the menu.. on all the 4 sides..


.

ddadmin
01-04-2006, 12:54 PM
You can remove the right most border by adding to the very last <a> element of the menu bar (not the drop down menu) the following:


<div id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a></li>
<li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')" style="background-image: none">News</a></li>
</ul>
</div>

The part in red is new.


2. i want rounded edges for the menu.. on all the 4 sides

Unfortunately this is something you'll need to do using a graphics program. If you need help with the CSS to connect the round edges to the two ends, just post on the forums.

pratik
01-04-2006, 01:43 PM
Unfortunately this is something you'll need to do using a graphics program. If you need help with the CSS to connect the round edges to the two ends, just post on the forums.

thankz a lot...... :D

well no probs abt the graphic part .. suppose i make 2 images for both the ends of the menu.. how do i use it .. i.e., how do i insert it in the css file?

ddadmin
01-04-2006, 01:57 PM
You can post the two images here, and either myself or someone else can take a look and see if there's an easy way to integrate them to this particular script's CSS.

pratik
01-05-2006, 07:43 AM
thankz again

well the 2 images tht i need at both the ends of the menu are

http://img224.imageshack.us/img224/6460/sidecopy9jz.gif----- http://img224.imageshack.us/img224/3595/sidecopycopy3gh.gif

if needed i can also post the css!!
waiting for a reply :)

and i was just wondering whtz the use of the javascrpit file given along with the menu ??

ddadmin
01-05-2006, 01:09 PM
Yes please post (by uploading as an attachment) your CSS file, in case there's changes from the default. The JavaScript file is what makes the menus drop down- you definitely need that. :)

pratik
01-06-2006, 09:25 AM
heere is the css file


#chromemenu{
}

#chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* main menu*/
#chromemenu ul{
border: 0px solid #000000;
width: 100%;
height: 25px;
background: url(chromebg4 copy.gif) center center repeat-x; /*Theme Change here*/
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right:0;
margin: 0;
float: right;
font: bold 11px Verdana;
}


#chromemenu ul li{
display: inline;
}

/* menu text*/
#chromemenu ul li a{
float: left;
color: #FFFFFF;
font-weight: bold;
padding: 6px 12px 7px 7px;
text-decoration: none;
background: url(divider4 copy.gif) center right no-repeat; /*Theme Change here*/
}

/*hover text*/
#chromemenu ul li a:hover{
color: #000000;
}

#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #990000; /*Theme Change here*/
border-bottom-width: 0;
font:bold 10px Arial;
line-height:18px;
z-index:100;
background-color: red;
width: 110px;
visibility: hidden;
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #990000; /*Theme Change here*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: white;
}

.dropmenudiv a:hover{ /*Theme Change here*/
background-color: #990000;
}

ddadmin
01-08-2006, 10:03 AM
I didn't have too much time to fiddle with the CSS for the original menu, but based on the things I tried, it didn't seem to want to play nice and accomodate two additional images on both ends (for the rounded corners). It was easier just so create a whole new CSS file with this intent from the start:


<style type="text/css">
#chromemenu{
margin: 0;
padding: 0;
}

#chromemenu ul{
background: url(background.gif) repeat-x;
margin-left: 0;
padding-left: 0;
margin: 0;
float: left;
font: bold 80% Verdana;
}

#chromemenu ul li{
display: inline;
}


#chromemenu ul li a{
float: left;
color: black;
font-weight: bold;
padding: 10px 13px 3px 6px;
text-decoration: none;
background: url(divider.gif) top right no-repeat;
}

#chromemenu ul li a:hover{
text-decoration: underline;
}

</style>


<div id="chromemenu">
<div style="float: left; background: url(leftcorner.gif) top right no-repeat; width: 8px; height: 32px"></div>
<ul>
<li><a href="sdfsf">Test</a></li>
<li><a href="sdfsf">Test</a></li>
<li><a href="sdfsf">Test</a></li>
<li><a href="sdfsf">Test</a></li>
<li><a href="sdfsf">Test</a></li>
</ul>
<div style="float: left; background: url(rightcorner.gif) top right no-repeat; width: 7px; height: 32px;"></div>
</div>

You'll need to change the image references to your own of course. It may still not look exactly the way you want it to, however. That's the problem with CSS- it needs to be custom tailored each step of the way.

pratik
01-10-2006, 07:29 AM
I didn't have too much time to fiddle with the CSS for the original menu, but based on the things I tried, it didn't seem to want to play nice and accomodate two additional images on both ends (for the rounded corners). It was easier just so create a whole new CSS file with this intent from the start:

.....................
You'll need to change the image references to your own of course. It may still not look exactly the way you want it to, however. That's the problem with CSS- it needs to be custom tailored each step of the way.

thankz a ton :)

so u mean tht i must replace this css with the original css... just changin the name for my images on bith ends

ddadmin
01-10-2006, 12:18 PM
Well, you'll need to replace both the CSS and the HTML of the menu that displays the menu bar itself (not the drop down menus). You'll see the new HTML in the code I posted above.

pratik
02-06-2006, 10:02 AM
helo again

well i changed the css and also the html for the menu... but the thing is this is how it looks now.. i want the images to come at both the ends of the menu and not up and down

http://img70.imageshack.us/img70/5334/untitled19pp.jpg