January 26, 2024 5:06 am

How to create jQuery Flipping menu Navigation

You are making a website and you want to show nice and smooth animated menus then you must go for jQuery animated menu not flash menus. Today I am going to show you in this article how you can create a flipping menu with jQuery, Its very easy and simple just follow bellow steps and you will rock!!

jquery-filipping-navigation

 

[wpdm_file id=37]

HTML in your index page

<html>
<head>
<title>Menu</title>
</head>
<body>
<ul id="gang_nav">
	<li><a href="https://www.phpgang.com">Home</a></li>
	<li><a href="https://www.phpgang.com/category/php">PHP</a></li>
	<li><a href="https://www.phpgang.com/category/html">HTML</a></li>
	<li><a href="mailto: [email protected]">Contact</a></li>
</ul>
</body>
</html>

jQuery function call

<script>
$(function() {
	$('#gang_nav').menuFlip();
});
</script>

jQuery libraries which wee have to include and you can also download them by clicking on above given download demo link.

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="phpgang.js"></script>

CSS need to make it look nice you can add your own as per your requirement:

   ul#gang_nav {
        background-color:#ffffff;
        border:none;
        overflow:hidden;
    }

    ul#gang_nav li {
        list-style:none;
        float:left;
        text-align:center;
        margin:0px 10px 0px 0px;
        height:20px;
        overflow:hidden;
    }

    ul#gang_nav li a  {
        font-family:helvetica;
        font-size:12px;
        color:#3f3f3f;
        text-transform:uppercase;
        text-decoration:none;
        background-color:white;
        margin:0px;
        padding:0px 5px 0px 5px;
        display:block;
    }

    ul#gang_nav li a.flipped_item {
        background-color:#000000;
        color: #ffffff;
    }

Please write down your reviews about this tutorial.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

2 responses to “How to create jQuery Flipping menu Navigation”

  1. siddhu says:

    first problem with ur site is loading, content is nice but looking another 9lessons, so please change the design be unique

  2. Hi There,

    I’m the author of this plugin. While this is a nice tutorial, I’d appreciate a credit link. Here’s the original link for this plugin:

    http://grimmdude.com/2011/08/11/jquery-menu-flip

    Thanks,
    -Garrett

Leave a Reply

Your email address will not be published. Required fields are marked *