attila2452 Posted January 16, 2012 Report Share Posted January 16, 2012 HTML: <div id="quick-links-container"><div id="quick-links"><ul> <li><span id="website-design" class="active">Website Design</span></li> <li><span id="graphic-design">Graphic Design</span></li> <li><span id="wordpress">Wordpress</span></li></ul></div><div id="quick-information"><div class="website-design"><h3>Website Design</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <br /><a href="#">Website Design</a></div><div class="graphic-design"><h3>Graphic Design</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><br /><a href="#">Graphic Design</a></div><div class="wordpress"><h3>Wordpress</h3> <p>A massive open source CMS with thousands of secure plug-ins to choose from to customize your website. Wordpress also allows you to manage your website’s content from anywhere between a personal blog to a distinguished online store.</p><br /><a href="#">Wordpress.org</a></div></div><div class="both"></div></div> CSS: #quick-links-container{width:960px; height:205px;}#quick-links-container #quick-links{width:200px; display:block; float:left; margin: 0 20px; padding-right:40px;}#quick-links ul{list-style: none;}#quick-links ul li{}#quick-links ul li span{ cursor:pointer; width:200px; height:35px; line-height:35px; display:block; margin:10px 0; padding:10px 20px; background-color:#e4e4e4; color:#333333; text-shadow: 1px 1px 1px #FFF; text-decoration:none; font-family:Palatino Linotype; font-style:italic; font-size:18px;}#quick-links li span.active{ background-color:#fcae00; color:#FFFFFF; text-shadow: 1px 1px 1px #eea607;}#quick-information{overflow: hidden;height:200px;width: 630px;margin-left: 50px;}#quick-information h3{color:#fcae00; font-family:"Palatino Linotype"; font-style: italic; font-size:24px; margin-top: 10px; margin-left:20px;}#quick-information p{color:#505050; padding:20px 10px 0 20px; font-family:Palatino Linotype; font-size:17px;}#quick-information a{color:#FFFFFF; background-color:#3B3B3B; padding:5px 8px; margin-left:20px; text-decoration:none;font-family:Palatino Linotype; font-style:oblique; font-style:italic; font-size:18px; line-height:35px;} jQuery: $(document).ready(function(){ $("#quick-information div").not($("#quick-information div").eq(0)).hide(); $('#quick-links ul li span').click(function(){ $("#quick-information div").slideUp(); $('#quick-links ul li span').removeClass('active'); $(this).addClass('active'); var classref= $(this).attr("id"); $("#quick-information ."+classref).slideDown(); }); }); OR http://jsfiddle.net/attilahajzer/B4xZ3/2/ Link to comment Share on other sites More sharing options...
dsonesuk Posted January 16, 2012 Report Share Posted January 16, 2012 Are you talking about applying a gradual fade, or just set opacity straight out? Input, input johnny 5 needs input. Link to comment Share on other sites More sharing options...
attila2452 Posted January 16, 2012 Author Report Share Posted January 16, 2012 fading the background from default to active. grey to orange. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 16, 2012 Report Share Posted January 16, 2012 (edited) HTML <div id="quick-links-container"><div id="quick-links"><ul> <li><b></b><span id="website-design" class="active">Website Design</span></li> <li><b></b><span id="graphic-design">Graphic Design</span></li> <li><b></b><span id="wordpress">Wordpress</span></li></ul></div><div id="quick-information"><div class="website-design"><h3>Website Design</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <br /><a href="#">Website Design</a></div><div class="graphic-design"><h3>Graphic Design</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p><br /><a href="#">Graphic Design</a></div><div class="wordpress"><h3>Wordpress</h3> <p>A massive open source CMS with thousands of secure plug-ins to choose from to customize your website. Wordpress also allows you to manage your website’s content from anywhere between a personal blog to a distinguished online store.</p><br /><a href="#">Wordpress.org</a></div></div><div class="both"></div></div> CSS #quick-links-container{width:960px; height:205px;}#quick-links-container #quick-links{width:200px; display:block; float:left; margin: 0 20px; padding-right:40px;}#quick-links ul{list-style: none;}#quick-links ul li{position:relative; height:55px; width:240px; margin:5px 0; }#quick-links ul li span, #quick-links ul li b{ cursor:pointer; width:240px; height:55px; line-height:55px; display:block; /*margin:5px 0;*/ padding:0; background-color:#e4e4e4; color:#333333; text-shadow: 1px 1px 1px #FFF; text-decoration:none; font-family:Palatino Linotype; font-style:italic; font-size:18px; text-indent:20px;}#quick-links li span.active{ background-color:#fcae00; color:#FFFFFF; text-shadow: 1px 1px 1px #eea607;}#quick-information{overflow: hidden;height:200px;width: 630px;margin-left: 50px;} #quick-information h3{color:#fcae00; font-family:"Palatino Linotype"; font-style: italic; font-size:24px; margin-top: 10px; margin-left:20px;}#quick-information p{color:#505050; padding:20px 10px 0 20px; font-family:Palatino Linotype; font-size:17px;}#quick-information a{color:#FFFFFF; background-color:#3B3B3B; padding:5px 8px; margin-left:20px; text-decoration:none;font-family:Palatino Linotype; font-style:oblique; font-style:italic; font-size:18px; line-height:35px;} #quick-links ul li b { background-color: #E4E4E4;font-weight:normal; width:240px; height:100%; display:none; position:absolute; top:0; left:0;} JQuery $(document).ready(function(){ $("#quick-information div").not($("#quick-information div").eq(0)).hide(); $("#quick-links ul li b").not($("#quick-links ul li b").eq(0)).show(); $('#quick-links ul li span').each(function(){ $(this).prev("b").html($(this).html()); }); $('#quick-links ul li b').click(function(){ $("#quick-links ul li b").show(); $(this).fadeOut("slow"); $("#quick-information div").slideUp(); $('#quick-links ul li span').removeClass('active'); $(this).next("span").addClass('active'); var classref= $(this).next("span").attr("id"); $("#quick-information ."+classref).slideDown(); }); }); Edited January 16, 2012 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now