Forums

Maddtechwf

After watching the video that Chris made about his friends website, I decided to start playing around with HTML5. I've got a menu setup inside the footer of my test site and I want to add dropdown effect to it but have it going upwards. I was hoping someone might be able to help me with this. I would really like to get it working with wordpress if possible.

TheDoc

Here's a code example for you:

.your-class {
     -moz-box-shadow: 0px -2px 5px #ffffff; /* FF3.5 - 3.6 */
  -webkit-box-shadow: 0px -2px 5px #ffffff; /* Saf3.0+, Chrome */
          box-shadow: 0px -2px 5px #ffffff; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
}

The negative number (-2px) means the it will shift upwards.

Maddtechwf

@TheDoc,

I guess I was very clear on what I was trying to do. I have your typical menu.


<ul>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#">
      <ul>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
         <li><a href="#"></a></li>
      </ul>
   </li>
   <li><a href="#"></a></li>
</ul>

Instead of the sub-menu dropping below the list item like it usually does, I would like it to go above the menu.

TheDoc

Aaahhh, sorry, my mistake! I read 'dropdown' as 'dropshadow'.

This is a really quick example, but hopefully can set you on the right path: http://jsfiddle.net/XM7Rx/

Maddtechwf

@TheDoc,
You are awesome. Thanks so much.

Maddtechwf

@TheDoc,

Would you happen to be any good with Wordpress. I'm still fairly new to the new Menu section of it and I really want to implement the code snippet you gave me.

TheDoc

I would! Do you have a link to the site that you're working on?

Maddtechwf

It's on my local machine. I setup a local server in my house and trying to get to work b4 I try to make my live site.

TheDoc

No problem. Create a jsfiddle with just the footer and the related CSS.

Maddtechwf

http://jsfiddle.net/rjvC5/

I would like the content to show up just like a normal dropdown and not be horizontal. Also, I have an arrow that I would like to appear above the initial menu list when hovered over and there are sub pages.

TheDoc

Sorry, not the code in your theme file, but the code that actually renders on the website!

Maddtechwf

http://jsfiddle.net/rjvC5/2/ - Sorry it hasn't taken 2 days to get back to you. Been a little busy. Let me know if you need anything else.

treehouse : what would you like to learn today?

Forums

[Solved] Menu with drop down based on Video #84 Chris McGarry