Okay, so I wrote this dropdown script for a website, but I couldn't think of a way of getting the icons to work in the way they do using modern standards and I'm aware that the way I've done it at the moment is pretty poor practise.
What I've done is a normal CSS Dropdown Navbar, but put a table in the block element. Thus allowing me to control the opacity of the icon using CSS:
ul.Nav li a img {
opacity:0;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav li a:hover img {
opacity:1;
}
This doesn't work in old versions of IE and actually breaks the hyperlinks so users can't navigate. The site works fine in Chrome and Firefox and you can view the webpage here
This is my HTML/PHP code:
<ul class="Nav">
<?php
for ($i = 0; $i < $numititles; $i++) {
echo "<li><a ";
if ($i == 0) {echo "style='border:none;width:".$navbutwidth."px;' ";}
echo "href='".$titles[$i][0][1]."'>"
."<table style='padding:0px;border-spacing:0px;width:100%;'><tr><td>"
. $titles[$i][0][0]
."</td><td style='padding-right:15px;width:20px;'>"
." <img src='/i/paw.png' style='width:20px;' alt='' />"
."</td></tr></table></a>";
$numjtitles = count($titles[$i]);
if ($numjtitles > 1) {
echo "<ul>";
for ($j = 1; $j < $numjtitles; $j++) {
echo "<li><a ";
if ($i == 0) {echo "style='border:none;' ";}
echo "href='".$titles[$i][$j][1]."'>"
."<table style='padding:0px;border-spacing:0px;width:100%;'><tr><td>"
.$titles[$i][$j][0]
."</td><td style='padding-right:15px;width:20px;'>"
." <img src='/i/paw.png' style='width:20px;' alt='' />"
."</td></tr></table></a></li>";
}
echo "</ul>";
}
echo "</li>";
}
?>
</ul>
..and here's my full CSS for the dropdown menu:
ul.Nav {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
z-index:80;
}
ul.Nav li {
float:left;
}
ul.Nav li a {
font-size:16px;
color:#FFF;
width:<?php echo ($navbutwidth-1); ?>px;
height:30px;
line-height:30px;
display:block;
text-decoration:none;
border-left:1px Solid #FFC;
}
ul.Nav li a table {
width:100%;
height:100%;
}
ul.Nav li a tr {
color:#FFF;
background-color:#960;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav li a tr:hover {
background-color:#C93;
}
ul.Nav li a td {
padding-left:15px;
}
ul.Nav li a img {
opacity:0;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav li a:hover img {
opacity:1;
}
ul.Nav ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:left;
float:right;
display:block;
padding:0;
min-width:9.3ex;
opacity:0;
-webkit-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
-moz-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
-ms-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
-o-transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
transition: left 0s linear 0s, opacity 0.2s ease-in-out 0s;
}
ul.Nav ul li {
float:none;
border-top:1px Solid #FFF;
}
ul.Nav ul a {
white-space:nowrap;
}
ul.Nav li:hover ul{
left:inherit;
opacity:1;
}
ul.Nav li:hover a{
text-decoration:none;
}
ul.Nav li:hover ul a{
text-decoration:none;
}
ul.Nav li:hover ul li a:hover{
}
What's the best way to achieve this.. I want to keep the paws that appear when you hover over the navigation buttons if possible!
You're code breaks in old versions of IE because you're putting a table in an anchor element.
You don't need a table to put the paw there. Just put it in CSS as a background image on the anchor and align it to right.
Something like:
a {
opacity:0;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
a:hover {
background: url("/i/paw.png") no-repeat;
background-position: 100% 5px;
}
If you want to use the img element (so you can animate the opacity), you can do it better this way:
<a href='#'><img src='/i/paw.png' />Home</a>
.Nav a img {
float: right;
margin-right: 5px;
width: 20px;
opacity: 0;
/** transition and other stuff */
}
That's all you need. You can try it out and see if it breaks or not in IE.