attila2452 Posted January 16, 2012 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 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 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 Share Posted January 16, 2012 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(); }); }); Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.