We believe that as people we often get things wrong,
Well, yes everyone makes mistakes, we wouldn't be human otherwise.
Anyways, I misunderstood the question. And this isn't a typical installation. As far as I can tell you're not using the chrome images. I thought that was what you wanted to change, not the triangle.
Here's what I did that worked locally in a mock up of the page - In the css get rid of the highlighted:
Code:
.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background:url(down%201.gif) no-repeat;
background-position:70px 11px;
z-index:1500;
color:#46454E;
}
Add some styles above it and below it so it looks like this:
Code:
.dropdownindicator {
width: 9px;
height: 5px;
font-size: 5px;
display: inline-block;
background-image: url(down.gif);
vertical-align: middle;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected {
color:#46454E;
}
.chromestyle ul li a:hover .dropdownindicator, .chromestyle ul li a.selected .dropdownindicator {
background-image: url(down%201.gif);
}
Now in the chrome.js file, edit this line:
Code:
dropdownindicator: '<img src="down.gif" border="0"/>', //specify full HTML to add to end of each menu item with a drop down menu
to:
Code:
dropdownindicator: '<span class="dropdownindicator"></span>', //specify full HTML to add to end of each menu item with a drop down menu
Now, two niceties you should add. For first time visitors and return visitors who have cleared their cache, the hover image will take a moment to load the first time. To fix that, add into the script the highlighted as shown:
Code:
//** Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//** Updated: July 14th 06' to v2.0
//1) Ability to "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align".
//2) Added an optional "swipe down" transitional effect for revealing the drop down menus.
//3) Support for multiple Chrome menus on the same page.
//** Updated: Nov 14th 06' to v2.01- added iframe shim technique
//** Updated: July 23rd, 08 to v2.4
//1) Main menu items now remain "selected" (CSS class "selected" applied) when user moves mouse into corresponding drop down menu.
//2) Adds ability to specify arbitrary HTML that gets added to the end of each menu item that carries a drop down menu (ie: a down arrow image).
//3) All event handlers added to the menu are now unobstrusive, allowing you to define your own "onmouseover" or "onclick" events on the menu items.
//4) Fixed elusive JS error in FF that sometimes occurs when mouse quickly moves between main menu items and drop down menus
//** Updated: Oct 29th, 08 to v2.5 (only .js file modified from v2.4)
//1) Added ability to customize reveal animation speed (# of steps)
//2) Menu now works in IE8 beta2 (a valid doctype at the top of the page is required)
;(function(){
var im = new Image();
im.src = 'down%201.gif';
})();
var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<span class="dropdownindicator"></span>', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 5], //enable swipe eff . . .
The other nicety is the down 1.gif image itself. It has some white pixels in it, but you're displaying it over an orange background, well perhaps not exactly orange, but you can see the color there, it's from the Logo wide1.png background image. In an image editor like Photoshop, Paint Shop, or The Gimp, change those white pixels so that they either blend in with the background, or are transparent.
One other completely unrelated thing - In the stylesheet it has:
Code:
body {
font:Verdana, Geneva, sans-serif;
background:#000000;
margin: 0;
padding: 0;
color: #000;
}
That's black text on a black background. You can choose white text on a balck background (probably best here) or some other contrasting colors. For that use:
Code:
body {
font:Verdana, Geneva, sans-serif;
background:#fff;
margin: 0;
padding: 0;
color: #000;
}
This is only important if one or more of the background images for other elements doesn't load and/or one or more of the other background colors for other elements gets lost somehow. But if that were to happen, you'd want folks to at least be able to read the page, right?
Also by removing the black there, you avoid a flash of black as the page loads in some browsers. White is better because it's the predominant color of the page once loaded.
Chrome CSS Drop Down Menu Icon
Reply With Quote
XImageTransform.Microsoft.Alpha(style=0,opacity=0)'
Originally Posted by Perdimia
Bookmarks