jquery - CSS Only Menu System -


i have simple three-page menu information website. used unordered list make menu, can't change opacity of correct page container depending on li clicked.

html

<div id="nav_container">     <ul>         <li class="nav_services"><i></i>services</li>         <li class="nav_home nav_active"><i></i>home</li>         <li class="nav_contact"><i></i>contact</li>     </ul> </div> 

update: these div's i'm trying alternately display.

<div id="services_container"></div> <div id="home_container"></div> <div id="home_container"></div> 

css

    .nav_services:active:not(.nav_active) #services {         opacity: 1;     }      .nav_services:active:not(.nav_active) #home_container, #contact_container {         opacity: 0;     }       .nav_home:active:not(.nav_active) #home_container {         opacity: 1;     }      .nav_home:active:not(.nav_active) #services_container, #contact_container {         opacity: 0;     }       .nav_contact:active:not(.nav_active) #contact {         opacity: 1;     }      .nav_contact:active:not(.nav_active) #services, #home {         opacity: 0;     } 

honestly, i'm pretty sure it's way called css, don't know how write it.

wound using jquery fulfill problem. simple function did trick.

i prefer css, but. now.

function page_handler() { $('.nav_services').click(function () {     if ($('.nav_services:not(.nav_active)')) {         $('#services_container').css({             opacity: 1         });         $('#home_container, #contact_container').css({             opacity: 0         });     } }); $('.nav_home').click(function () {     if ($('.nav_home:not(.nav_active)')) {         $('#home_container').css({             opacity: 1         });         $('#services_container, #contact_container').css({             opacity: 0         });     } }); $('.nav_contact').click(function () {     if ($('.nav_contact:not(.nav_active)')) {         $('#contact_container').css({             opacity: 1         });         $('#services_container, #home_container').css({             opacity: 0         });     } }); } 

Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -