Help to create a special menu
Hi boys!
Sorry for my english...I hope you understand me!
I wanted to create a menu with a "blur" effect, similar to this:
http://www.3point7designs.com/web-design2.html
I created it, using the tutorial:
http://www.3point7designs.com/blog/2007 ... enu-trick/
So, what I'd like to do now is give to the menu a "fade" effect, with transition from blur to norma and from normal to blur, with effects fade in and fade out.
I was able to create a "normal" menu with fade effect, you can see moving the mouse over the top menu it in this site (that is absolutly work in progress...):
www.ivanisevic82.netsons.org
So, now I post the code I used to create che first menu (Fade) anche the second (Blur):
FADE EFFECT:
Php part:
<div id="menu">
<ul>
<li id="Mission"><a href="http://ivanisevic82.netsons.org/pages/chi-siamo/mission.php" "id="SubMission"><span></span>Mission</a></li>
<li id="Recupero"><a href="http://ivanisevic82.netsons.org/pages/recupero-crediti/perche-non-paga.php" "id="SubRecupero"><span></span>Recupero Crediti</a></li>
<li id="Informazioni"><a href="http://ivanisevic82.netsons.org/pages/informazioni.php" "id="SubInformazioni"><span></span>Informazioni</a></li>
<li id="Investigazioni"><a href="http://ivanisevic82.netsons.org/pages/investigazioni/indagini-personali.php" "id="SubInvestigazioni"><span></span>Investigazioni Generali</a></li>
<li id="Imprese"><a href="http://ivanisevic82.netsons.org/pages/per-le-imprese.php" "id="SubImpresa"><span></span>Per le Imprese</a></li>
<li id="Privati"><a href="http://ivanisevic82.netsons.org/pages/per-i-privati.php" "id="SubPrivati"><span></span>Per i Privati</a></li>
<li id="Professionisti"><a href="http://ivanisevic82.netsons.org/pages/per-i-professionisti/avvocati.php" "id="SubProfessionisti"><span></span>Per i Professionisti</a></li>
<li id="Contattaci"><a href="http://ivanisevic82.netsons.org/pages/contattaci.php" "id="SubContattaci"><span></span>Contattaci</a></li>
</ul>
</div>
Css part:
#menu{
position: relative;
height: 35px;
overflow: hidden;
background: url(/media/MenuSfondoTondo.jpg);
margin-top: 0;
}
#menu ul,#menu li{
margin: 0;
padding: 0;
list-style: none;
}
#menu a{
position: absolute;
top: 0;
height: 35px;
background-image: url(/media/MenuTondo1.jpg);
text-indent: -9999px;}
#Mission a{width: 101px;left: 0px;background-position: 0px 0}
#Recupero a{width: 144px;left: 101px;background-position: -101px 0}
#Informazioni a{width: 118px;left: 245px;background-position: -245px 0}
#Investigazioni a{width: 126px;left: 363px;background-position: -363px 0}
#Imprese a{width: 112px;left: 489px;background-position: -489px 0}
#Privati a{width: 100px;left: 601px;background-position: -601px 0}
#Professionisti a{width: 156px;left: 701px;background-position: -701px 0}
#Contattaci a{width: 102px;left: 857px;background-position: -857px 0}
#Mission a.active{background-position: 0 -35px}
#Recupero a.active{background-position: -101px -35px}
#Informazioni a.active{background-position: -245px -35px}
#Investigazioni a.active{background-position: -363px -35px}
#Imprese a.active{background-position: -489px -35px}
#Privati a.active{background-position: -601px -35px}
#Professionisti a.active{background-position: -701px -35px}
#Contattaci a.active{background-position: -857px -35px}
/*parte per JQuery*/
#menu span{display: none;
position: absolute;
top: 0;
left: 0;
height: 35px;
background-image: url(/media/MenuTondo1.jpg);
cursor: pointer
}
#Mission span{width: 101px;background-position: 0 -35px}
#Recupero span{width: 144px;background-position: -101px -35px}
#Informazioni span{width: 118px;background-position: -245px -35px}
#Investigazioni span{width: 126px;background-position: -363px -35px}
#Imprese span{width: 112px;background-position: -489px -35px}
#Privati span{width: 100px;background-position: -601px -35px}
#Professionisti span{width: 156px;background-position: -701px -35px}
#Contattaci span{width: 102px;background-position: -857px -35px}
BLUR EFFECT
PHP part:
<div id="main_nav">
<ul>
<li><a href="http://ivanisevic82.com" accesskey="3" id="home" title="Home Page"><span></span>Home Page</a></li>
<li><a href="about-us.html" accesskey="4" id="about" title="About 3.7 Designs"><span></span>About Us</a></li>
<li><a href="web-design.html" accesskey="5" id="webdesign" class="active" title="Web Design and Development"><span></span>Web Design</a></li>
<li><a href="graphic-design.html" accesskey="6" id="Graphic" title="Graphic Design and Marketing"><span></span>Graphic Designs</a></li>
<li><a href="keyword-optimization/michigan-seo.html" accesskey="7" title="Search Engine Optimization and Marketing" id="seo"><span></span>Search Engine Optimization SEO</a></li>
<li><a href="ann-arbor-marketing.html" accesskey="8" id="contact" title="Contact Us"><span></span>Contact Us</a></li>
</ul>
</div>
CSS Part:
#main_nav {
list-style: none;
margin: 0;
padding: 0;
}
#main_nav li {
float: left;
list-style: none;
}
#main_nav li a {
text-indent: -999999px;
overflow: hidden;
display: block;
height: 80px;
}
#home{ background: url(/media/1.jpg); width: 103px; }
#home:hover { background: url(/media/1.jpg) 0 0 !important; }
#webdesign { background: url(/media/2.jpg); width: 103px; }
#webdesign:hover { background: url(/media/2.jpg) 0 0 !important; }
#Grafic { background: url(/media/.jpg); width: 103px; }
#Grafic:hover { background: url(/media/.jpg) 0 0 !important; }
#contact { background: url(../images/navigation/home.gif); width: 116px; }
#contact:hover { background: url(../images/navigation/home.gif) 0 0 !important; }
#about { background: url(/media/3.jpg); width: 103px; }
#about:hover { background: url(/media/3.jpg) 0 0 !important; }
#seo { background: url(../images/navigation/home.gif); width: 270px; }
#seo:hover { background: url(../images/navigation/home.gif) 0 0 !important; }
#main_nav:hover li a#home { background-position: -206px; }
#main_nav:hover li a#webdesign { background-position: -206px; }
#main_nav:hover li a#graphicdesign { background-position: -340px; }
#main_nav:hover li a#contact { background-position: -232px; }
#main_nav:hover li a#about { background-position: -206px; }
#main_nav:hover li a#seo { background-position: -540px; }
So, can you help me to combine this 2 effects?
Thank you very mutch!
Bye!!!