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
Post a Comment