banner

Sliding Dropdown Menu

 

1. Copy the code below before <style type=”text/css”>

<script src="http://static.tumblr.com/me5sfsd/1YFl414t0/jquery142.js"></script>
<script type="text/javascript"> 
$(document).ready(function () {
$('li.drawer div:nth-child(2)').hide();
$('li.drawer h4').click(function () {
if ($(this).hasClass('open')) {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');}
else {
$('li.drawer div:visible:nth-child(2)').slideUp().prev().removeClass('open');
$(this).next().slideDown();
$(this).addClass('open');}
});
});
</script>

2. Copy and paste the code below before </style>

ul#drawers {width: 100px; list-style: none; margin: 0 auto; padding: 0px; border-top: 0px; color: #000;}

ul#drawers a {text-decoration: none; color: #000;}

ul#drawers li h4 {margin: 0; padding: 0px; text-transform: Camelcase; font-size: 10px; text-align: center; background-color: #363835; background: rgba(255, 255, 255, 0.0); -webkit-transition: background-color 0.2s ease-out; -moz-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;}

h4.small {display: table-cell; width: 100px; margin: 0px; height: 100%;}

li.drawer h4.open {background-color: ; border-top: 0px;}

li.drawer div {padding: 0px; margin: 0px; line-height: 10px; background-color: #363835; background: rgba(255, 255, 255, 0.0);}

li.drawer div li {list-style-type: disc;}

li.drawer div ul {-webkit-padding-start: 12px;}

3. Then add this code in your description. Replace “Title / Image URL” with title or image you want to click on for the menu to slide. Replace “LINK HERE” with the link you want, “TEXT HERE” with the title of the link.

<ul >
<li class="drawer" > 
<h4>Title / Image URL</h4>
<div align="center">
<p>
<a href="LINK HERE">TEXT HERE</a>
<p>
<a href="LINK HERE">TEXT HERE</a>
<p>
<a href="LINK HERE">TEXT HERE</a>
</p>
</div>
</li>
</ul>

**add this if you want use an image:

<img src="IMAGE URL"></a>

example:

<h4><img src="http://bloggingmage.fileave.com/cerealguy.PNG"></a></h4>

Done! Good Luck :)

Source: academyoftumblr

    • #admin
    • #dropdown menu
    • #sliding dropdown menu
    • #basic
    • #sliding drop down menu with image
    • #sliding dropdown menu with image
  • 1 year ago
  • 744
  • Permalink
  • Share

744 Notes/ Hide

  1. allmonchele likes this
  2. ethiopiankardashian likes this
  3. guts-desu likes this
  4. moshinginwonderland likes this
  5. babydoll-desu likes this
  6. kaye-langankita likes this
  7. ipagem likes this
  8. higherandhaya likes this
  9. cielinexile likes this
  10. reminiscent-revelations likes this
  11. nosta1gic likes this
  12. innsurgent likes this
  13. unitedkingdomhereicome likes this
  14. martebeisland likes this
  15. jadeamaya likes this
  16. heavenly-garden likes this
  17. aboutapoisonapple likes this
  18. icytree likes this
  19. trovbled likes this
  20. e-nnieh likes this
  21. ak47flyflyfly likes this
  22. nodogsinthecar likes this
  23. aabby likes this
  24. janeru likes this
  25. dramarch-tic likes this
  26. glamluxe-gala likes this
  27. innertrust likes this
  28. sombrasilenciosa likes this
  29. naturalitos likes this
  30. pilyangkagit likes this
  31. youreflectionisablur likes this
  32. ddaehyun likes this
  33. zeloid likes this
  34. rabb-t likes this
  35. sending-good-vibes likes this
  36. souldesu likes this
  37. alohamermaids likes this
  38. semprrra likes this
  39. corysgleekgirl likes this
  40. toby-etc likes this
  41. imperfectlyperfectklarie likes this
  42. larryscage likes this
  43. so-damn-gorgeous likes this
  44. dev1l-ish likes this
  45. saloooooma likes this
  46. alessoneverl3arned likes this
  47. s-c-h-i-z-o-p-h-r-e-n-i-a-a likes this
  48. sadyangmatalino likes this
  49. woojiiseok likes this
  50. Show more notesLoading...
← Previous • Next →

Portrait/Logo

Tumblr Academy is a Tutorial Blog. You can find a various tutorials for your tumblr including html code, theme, useful link, tips etc.

7 confused students




For Theme Docs
● Energy Saving Mode
● Welcome Message
● Putting A Background
● Putting A Header
● Endless Scroll
● Disable Right Click
● Fading Image
● Reblog Button On Your Post
● Cursor
● Scroll To Top Button
● Recommend Button
● Stylish Scrollbar / Scrollbar With Image
● Sparkle Link Hover
● Rainbow Link Hover
● Shaking Image
● Pop Up Ask Box/Link

For Descriptions
● Background Music
✓ Youtube Player
✓ SCM Player
✓ MixPod
✓ Streampad
● Ask Box In Description/Sidebar
● Twitter Badge
● Chat Box
●Make A Link
● Hit Counter And User Online
● Scroll Box
● Scrolling Image / Image Marquee
● Navigation Bars
● Sliding Drop Down Menu
● Sliding Drop Down Menu With Image

For Dashboard
●Missing e 1.5.7 [update]
[ ✓ Unfollower List. ✓ Follow Checker. ✓ Bookmark. ✓ Magnify. ✓ Reblog Yourself. ✓ Safe Dash. ✓ Time Stamp. ✓ Post Tumblr Crush. ✓Jump To Dash. ✓ Ask Box In Dashboard. ✓ Enlarge Tumblr Avatar. ✓ Slim Sidebar. ✓ One Click Reblog. ✓ Mass Editor Tweaks etc ]
● Dashboard / Log-in Background
● Others

Basic / For Posting
● Basic HTML Code
● Marquee
● Change URL
● Hide Following People
● Follow Yourself
● Answer Questions With Image/Gifs
● Let People Answer Your Post
● Link Tag Post
● Make A Page
Music Posting ● Number of post to show on your blog
● Enable Ask Box (for new dashboard)

Others
● Image For Saving Energy / Standby Mode
● Track Anonymous Ask
● Redirect To a New URL
●Delete Secondary Blog ● Tumblr Status
● Disable Follow Button
● Mapping Image / Image Map
● Background Layout
● Facebook Things
● Theme Recover

● Pop Up Ask Box/Link
● Sliding Drop Down Menu With Image
● Sliding Drop Down Menu
● Energy Saving Mode
● Shaking Image
● Rainbow Link Hover
● Image For Saving Energy / Standby Mode
●Make A Link
● Redirect To a New URL

I do not own all the code on this blog, i'm modify and edit some code a bit to suit for the Tumblr Theme All images for an explanation of the tutorial is copyrighted by TUMBLR ACADEMY. If you see something has been poorly credited, please TA me. Thank You.

  • FAQs
  • Useful Link
  • Saving Energy Image
  • Icons
  • RSS
  • Random
  • Archive
  • Ask Professor
  • Submit
  • Mobile

Tumblr Academy. Effector Theme by Carlo Franco.

Powered by Tumblr

Counting Since 30 MAY 2011 free counters



ASK BOX IS NOW OPEN

CLICK HERE

click the link and wait for 5second and click skip ad. Thank You ;)