Mip Design themes

ChangeLog – FancyTheme v4.2Sat, Nov 14, 2009 in Announcements, WP templates

This update will fix most problems people have with Internet Exporer and drop down menu. I created all new css classes and combine it with jQuery framework. Just download updated file from ThemeForest.

Here is the change log:

1. header.php

Remove line 11:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/superfish.css" type="text/css" media="screen" />

and line 33:

$("ul.sf-menu").superfish(); 

Change line 50 to:

<ul id="nav">

2. style,css

Completely remove “Page navigation” section (line 224-278) and replace them with these new lines:

/* Page navigation
------------------------------------------------------*/

#nav, #nav ul{
	z-index:999;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
} 

#nav a{
	display:block;
	float:none;
	font: bold 1.0em Arial, Tahoma, sans-serif;
	color: #fff;
	text-decoration: none;padding: 12px 15px 13px 15px; } 

#nav a:hover{
	background: url("images/bg_nav_hover.gif") repeat-x 0% 0%;
}

#nav li{
	float:left;
	position:relative;
} 

#nav li:hover{
	background: url("images/bg_nav_hover.gif") repeat-x 0% 0%;
} 

/* first dropdown */
#nav ul {
	position:absolute;
	top:3.3em;
	z-index:999;
	margin: 0;
	padding: 0;
	background-color: #7a7d7d;
} 

#page-navigation #nav li ul li{
	float: left;
	clear: both;
	height: auto;
	padding: 0;
	margin: 0;
} 

#page-navigation #nav li li:hover{
	background-color: #9cb032;
} 

/* drop links */
#page-navigation #nav li ul a {
	width:15em;
	height:auto;
	z-index:999;
	border: none;
	padding: 7px 5px 7px 15px;
} 

#page-navigation #nav li ul a:hover {
	background: none;
	background-color: #9cb032;
} 

#nav ul ul{
	top:auto;
	z-index:999;
} 

#nav li.current_page_item a
{
	background: url("images/bg_nav_active.gif") no-repeat 50% 100%;
	padding: 14px 15px 18px 15px;
	border-left: 1px solid #ece9e2;
	border-right: 1px solid #ece9e2;
}

#nav li.current_page_item li a
{
	background: none;
	background-color: #7a7d7d;
}

/* second level dropdown */
#nav li ul ul {
	left:16.6em;
	margin:-2.4em 0 0 0;
	z-index:99;
} 

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
	display:none;
	z-index:99;
} 

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
	display:block;
	z-index:99;
} 

3. functions.js

Add new function that will interact with drop down menu:

function MainNavigation(){
	$("#nav ul ").css({display: "none"}); // Opera Fix
	$("#nav li").hover(function(){
	$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
	},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
	});
}

$(document).ready(function(){
	MainNavigation();
});

Related posts:

• ChangeLog – FancyTheme v3.1
• Retro theme tutorials (part I): How to position the navigation menu below the header image?
• Inspiredblog: How to implement filmstrip navigation from FancyTheme
• Retro theme tutorials (part II): How to replace the text main site name with a simple PNG file?
• Retro TUT: Update on rounded corners

About the Author

Danny is a freelance web designer and developer based in Zagreb, Croatia. He is also the founder and owner of Mip Design Studio. In his free time, he creates mostly wordpress themes sold on Themeforest, and on this blog gives support, advices and help. Contact the author | Visit authors website