Bakao Themes

Sliding Menu Bar by Fukuo

Live Preview

Recently, I’ve been experimenting the code on how to make a menu bar with new transition and after a few hours experimenting the code and transition, I’ve decided to share what I’ve been working on with you. If you find a bugs, please contact me so I can fix it.

Please note that this might not be supported in all browsers, this is still experimental

Before we continue to the markup, I’m assuming you that you have understand the basic of HTML and CSS and know how to use it, just adjust the menu with your desired size, I am not helping with the customization.

HTML: Put the code under <body> tags:

<div id="main_holder_menu">
     <div class="title_menu">
         <!-- You can change the 'menu' with your own words -->
            MENU
    </div>
        <div class="one_delay"><a class="holder_menu" href="#">Home</a></div>
        <div class="two_delay"><a class="holder_menu" href="#">Archive</a></div>
        <div class="three_delay"><a class="holder_menu" href="#">Contact</a></div>
        <div class="four_delay"><a class="holder_menu" href="#">Links</a></div>
</div>

CSS: After putting the code above, put this code between <style type=”text/css”> and </style> tags:

#main_holder_menu {
    width:220px;
    height:70px;
    overflow:hidden;
    margin:100px auto auto 730px;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

#main_holder_menu:hover {
    height:400px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.title_menu {
    height:70px;
    text-align:center;
    padding:0px 10px 15px 10px 10px;
    background-color:rgba(255,255,255,0.5);
    font-family: 'Rationale', sans-serif;
    font-size:44px;
    text-shadow:2px 1px 0px #fff;
}

.holder_menu {
    width:200px;
    display:block;
    color:white; /* The color of menu */
    text-align:center;
    font-family: 'Rationale', sans-serif;
    font-size:29px;
    background-color:rgba(0,0,0,0.2); /* The background of menu */
    margin-bottom:10px;
    padding:10px 10px 15px 10px;
}

#main_holder_menu:hover .one_delay {
   margin-left:0px;
   transition-delay:0.2s;
   -webkit-transition-delay:0.2s;
}

.one_delay {
   margin-left:220px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#main_holder_menu:hover .two_delay {
   margin-left:0px;
   transition-delay:0.5s;
   -webkit-transition-delay:0.5s;
}

.two_delay {
    margin-left:-220px;
    -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#main_holder_menu:hover .three_delay {
   margin-left:0px;
   transition-delay:0.8s;
   -webkit-transition-delay:0.8s;
}

.three_delay {
    margin-left:220px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
     transition: all 0.5s ease;
}

#main_holder_menu:hover .four_delay {
   margin-left:1px;
   transition-delay:1s;
   -webkit-transition-delay:1s;
}

.four_delay {
    margin-left:-220px;
    -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

We haven’t finished yet! Since, I am using the font from Google Webfonts, we need to include the provided code below:

<link href='http://fonts.googleapis.com/css?family=Rationale' rel='stylesheet' type='text/css'>

That’s all to it, I hope this is useful, if you have a question; just send me a shot! Any form of Credit, Like or Reblog are appreciated!

7 years ago

ninpen:

Tools roundup #2 (starting from top left down) Part I
liffect effects for lists - transition effects (works with images & lists)
Nifty Modal Windows effect - A set of experimental modal window appearance effects with CSS transitions and animations.
Colourco- color picker tool. You can use different color rules such as monochrome, triad, compliment, analogic, quad, and more
CSS3 menu with jquery- navigation effects with the use of css and jquery (the website is in french)
Simtip -a simple css tooltip made with sass
Yummi loader- page loader effect
Breadcrumb navigation- create a flat style breadcrumb navigation with css
Shapeshift- an alternative to masonry
Navicon- animated navigation icons with css
Opening type- cut out animated letters (another tutorial here)
Web Colour- type in a website and it gives you the color scheme
CSS transformation- a 3D animated css transformation effect
SVGeneration- similar to subtle patterns with more customization features
DoCapture- online screen capture tool
Slidr- javascript library for adding slide transitions to your page
Slanted tabs- slanted tabs with css 3D transforms

7 years ago

lmthemes:

» VOL I - Basic Structure
» VOL II - Sidebars
» VOL III - Posts
» VOL IV - Post Info
» VOL V - Customizations & Variables
Tutorial Series Notes & FAQ
Please like/reblog this post if you found the tutorial helpful! ♥
Read More

7 years ago

elletricity:

HOW TO CHANGE THE COLOR OF YOUR AUDIO PLAYERS
Please note that you may need additional styling to match your theme. Also, this may not work properly with appended posts (e.g. posts that show up when you enable infinite/endless scrolling)
Look in your theme HTML and look for the audio player embed. It should look like {AudioPlayer}, {AudioPlayerWhite}, {AudioPlayerGrey}, or {AudioPlayerBlack}.
Replace that code with:
<div class="audio_box" id="{PostID}">{AudioPlayerWhite}</div>
Put this code right before </body>:
<script type="text/javascript">
$(function () {
    $(".audio_box").each(function () {
    	var d = $(this).attr("id"),
			e = $(this);
		$.ajax({
			url: "http://" + {Name} + ".tumblr.com/api/read/json?id=" + d,
			dataType: "jsonp",
			timeout: 5E4,
			success: function (d) {
				d = d.posts[0]["audio-player"].replace("FFFFFF", "XXXXXX");
				e.html('<div class="audio_player">' + d + "</div>")
			}
		})
	});
});
</script>
Replace XXXXXX with the hex code of your desired color.

7 years ago

Music Player Gifs

stewlate:

I noticed that the stereo gif used in Ixora’s drop down music tab only comes in black, rainbow, and a soft rainbow. I realized that it isn’t very useful when neither black or rainbow go with the palette being used on your blog.
I don’t normally post things resource related, but I figured I’d give it a shot. I made different coloured versions of that stereo gif for your liking. Including white, but you probably won’t be able to see it unless you highlight it with your cursor. For your convenience I’ve placed an asterisk (*) directly before the white gif.
The medium & light rainbow ones, as well as the black one are not mine!
Neutrals
    *
Light

Medium

Dark

Neon

LGBTQ






Have fun!

7 years ago

ADDING A FAVICON

htmlcodinghelp:

What is a favicon?
When you visit a site, you should see a little icon on the tab, next to the site title. That is a favicon.
To add a favicon, first you need to choose one from here.
Read More

7 years ago

cupofteo inquired

How do I set up your themes?

Here you go! This should help. :)

7 years ago

Tumblr themes ‘drop-down lists’ now documented

buildthemes:

Tumblr’s new customization feature that allows users to quickly change the design and functionality of a theme with simple options from a drop-down list, is now fully documented by Tumblr.
“With this new feature, you can now give users several options for a particular design element,” said Tumblr in a theme developer announcement.
“Our new theme, Optica, shows the drop-downs in action”.
Here’s a suggested snippet of code for enabling options from the documentation, provided in the documentation (and used in Optica):
<html>
    <head>
        
        <meta name="select:Layout" content="regular" title="Regular">
        <meta name="select:Layout" content="narrow" title="Narrow">
        <meta name="select:Layout" content="grid" title="Grid">
    </head>
    <body>
        <div class="content {select:Layout}">
            ...
        </div>
    </body>
</html>
Also check out our previous post, that explores enabling the drop-down lists to style an avatar like in Optica.