Dropdown menu help - Post ID 241087

Nov 9th, 2014 at 11:44 PM
User 2292452 Photo

DJ
Registered User
10 posts

This menu is not showing correctly. It is supposed to be horizontal, have images show when you hover over one of the selections and also have subdirectories show under the selection when hovering. I used this download and edited it to get it to look like I want, http://tympanus.net/codrops/2010/07/16/ … -box-menu/

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Slide Down Box Menu with jQuery and CSS3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
body{
background:#333 url(bg.jpg) repeat top left;
font-family:Arial;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#aaa;
text-transform:uppercase;
text-decoration:none;
text-shadow:1px 1px 1px #000;
margin-right:15px;
}
span.reference a:hover{
color:#ddd;
}
ul.sdt_menu{
margin-top:25px;
}
h1.title{
text-indent:-9000px;
background:transparent url(title.png) no-repeat top left;
width:633px;
height:69px;
}
</style>
</head>
<body>
<div class="content">
<h1 class="title"></h1>
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="www.jacquelyn-of-many-trades.com/index.com">
<img src="images/1.jpg" width="170" height="170" alt="" title="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">About me</span>
<span class="sdt_descr"><font color="#C60C31">Get to know me</font></span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/2.jpg" width="170" height="133" alt="" title="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Research</span>
<span class="sdt_descr"><font color="#C60C31">I love to learn.</font></span> </span> </span></span>
</span>
</a>
<div class="sdt_box">
<a href="#"><b><font color="#C60C31">Coming Soon</font></b></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</li>

<li>
<a href="#">
<img src="images/3.jpg" width="167" height="170" alt="" title="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Organize</span>
<span class="sdt_descr"><font color="#C60C31">Let me get you organized!</font></span> </span> </span></span>
</span>
</a>
<div class="sdt_box">
<a href="#"><b><font color="#C60C31">Coming Soon</font></b></a>
<a href="#"></a>
<a href="#"></a>
</div>
</li>
<li>
<a href="www.jacquelyn-of-many-trades.com/ebay.html">
<img src="images/4.jpg" width="170" height="133" alt="" title="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Ebay Seller</span>
<span class="sdt_descr"><font color="#C60C31">I completed ebay classes.</font></span> </span> </span></span>
</span>
</a>
</li>
<li>
<a href="pets/site/pethome.html"></a>
<img src="images/6.jpg" width="170" height="170" alt="" title="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Pet Sitting</span>
<span class="sdt_descr"><font color="#C60C31">I love animals!</font></span> </span> </span></span>
</span>
</a>
<div class="sdt_box">
<a href="pets/petsitting_about.html">About me</a>
<a href="#"></a>
<a href="#"></a>
</div>
</li>
<li>
<a href="#">
<img src="images/5.jpg" width="170" height="164" alt="" title="" />
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">AND More</span>
<span class="sdt_descr"><font color="#C60C31"></font></span> </span> </span></span>
</span>
</a></span>
<div class="sdt_box">
<a href="#"><font size="2"></font></a>
<a href="www.jacquelyn-of-many-trades.com/notary.html">Notary</a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a></div>



</span></div>


</ul>
</div><br><br><br><br><br><br>
<font size="4"><font color="#FEC321"><p> The image of the butterfly & the words that create it are some of the things that make me who I am. I hope you enjoy learning more about me in this<br> creative way.
If you would like to know more about the butterfly or the words that create it, please feel free to ask. Thanks for visititng my site and I <br>hope we will be able to
do business together. <b>PEACE</b></p><br><br>
</font></font>
<div align="left"><div style="width: 400px; height: 388px; padding-bottom: 00px;">
<script src="http://cdn.tagul.com/embed/jjtdyob3c4gl"></script>
<!-- Please don't remove attribution to Tagul.com -->
<div style="display: table; margin: 0 auto;"><a href="http://tagul.com/"><font size="1"><font color="#FEC321">Created with Tagul.com</font></font></a></div><br><br><br><br>



<div>
<span class="reference"><br><br><br><br><br><br><br><br><br>
<font size="3"><p><sub><img src="red sox logo tiny15.png" width="20" height="19" alt="" title="" /></sub>&nbsp;&nbsp;Dawn J. B. Johnson, MDiv&nbsp;&nbsp;<sub><img src="bruins.png" width="20" height="15" alt="" title="" /></sub> &nbsp;&nbsp;Phone #: (336) 891-0743&nbsp;&nbsp;<sub><img src="celtics.png" width="20" height="19" alt="" title="" /></sub>
&nbsp;&nbsp;Email: <a href="mailto:Dawn@JACQuelyn-of-many-trades.com?subject=From webpage"><font color="#0D244D">Dawn@JACQuelyn-of-many-trades.com</font></a>&nbsp;&nbsp;<sub><img src="revpatimage.png" width="20" height="16" alt="" title="" /></sub>
</font>
<a href=""></a>
</span>
</div>

<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
});
</script>
</body>
</html>

and my style sheet:

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:200px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:200px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:200px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:200px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:200px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}


Thanks for any help you will be able to supply.
Nov 10th, 2014 at 12:18 AM
User 2088758 Photo

Steve
Senior Advisor
3,087 posts

Hi DJ,

Do you have a link to your website where the menu is?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
Nov 10th, 2014 at 12:10 PM
User 271657 Photo

paintbrush
Ambassador
3,816 posts

website >>>http://jacquelyn-of-many-trades.com/#
menu >>>http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

DJ, you should try correcting your code as much as possible, this will help narrow down causes for things that aren't working as you would expect them to:
http://validator.w3.org/check?uri=http% … mp;group=0

Is there a reason for the 'DTD XHTML 1.0 Strict' Doctype?
***You might want to change your title tag – this is what my browser tab displays for your site:
"Slide Down Box Menu with jQuery and CSS3"
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.