http___www.kroativ.net_izdvojeno_kako-napraviti-moderni-web-20-dizajn__1.xml
1.1 2.1 3.1 4.1 4.2 4.3 5.1 6.1 6.2 6.3 7.1 8.1 9.1 9.2 9.3 9.4 9.5 9.6 9.7 10.1 11.1 11.2 12.1 12.2 12.3 13.1 14.1 14.2 14.3 15.1 16.1 16.2 17.1 18.1 18.2 19.1 20.1 21.1 22.1 22.2 23.1 24.1 25.1 26.1 26.2 27.1 29.1 29.2 29.3 30.1 30.2 31.1 32.1 33.1 33.2 34.1 34.2 35.1 36.1 37.1 38.1 39.1 39.2 39.3 39.4 39.5 39.6 39.7 39.8 40.1 41.1 42.1 42.2 43.1 44.1 44.2 45.1 46.1 46.2 46.3 47.1 48.1 49.1 49.2 50.1 51.1 52.1 53.1 54.1 55.1 56.1 56.2 57.1 58.1 59.1 59.2 60.1 60.2 60.3 60.4 60.5 60.6 60.7 60.8 61.1 62.1 63.1 64.1 65.1 66.1 67.1 67.2 68.1 69.1 69.2 69.3 70.1 70.2 71.1 72.1 73.1 74.1 75.1 76.1 76.2 76.3 77.1 78.1 78.2 79.1 80.1 81.1 81.2 82.1 82.2 82.3 82.4 82.5 82.6 82.7 83.1 84.1 85.1 85.2 85.3 86.1 87.1 88.1 89.1 90.1 90.2 90.3 91.1 92.1 92.2 92.3 92.4 92.5 93.1 94.1 95.1 95.2 96.1 96.2 97.1 97.2 98.1 99.1 100.1 101.1 102.1 102.2 103.1 104.1 105.1 106.1 106.2 108.1 109.1 110.1 110.2 110.3 111.1 112.1 113.1 113.2 113.3 114.1 114.2 115.1 116.1 117.1 117.2 118.1 119.1 120.1 121.1 122.1 123.1 124.1 125.1 125.2 126.1 126.2 127.1 128.1 129.1 129.2 130.1 130.2 131.1 132.1 133.1 133.2 134.1 135.1 136.1 137.1 138.1 138.2 139.1 139.2 140.1 140.2 141.1 142.1 142.2 143.1 143.2 143.3 144.1 145.1 146.1 146.2 146.3 147.1 147.2 147.3 148.1 148.2 149.1 149.2 150.1 150.2 151.1
HTML Tabs: Complete tutorial and plugin Detailed tutorial on creating, styling and scripting your own HTML/CSS tabs, while making code re-usable creating a lightweight jQuery plugin. Script on github:gist The following post is a step by step, in-depth tutorial, containing the actual code in great detail and explanation for each step in the development process. In short, it’s pretty long. If you just want to grab the plugin and use it right away, skip to the next page. HTML tabs tutorial Our objective is to create cross-browser HTML tabs and automate implementation as much as possible, so we can easily re-use the code on multiple pages and/or elements. We’ll go for a perfectly clean markup, pure CSS for styling and scripting using the jQuery library. We’ll use jQuery (instead of pure CSS or vanilla javascript) cause we can do all the cool stuff with minimum coding and ultimately, create a proper plugin that’s easy to implement on any project 😉 The markup Tabs markup should be as minimal as possible and pretty straight forward: First       Second       Third       Fourth           First   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Second   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Third   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Fourth   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. The tabbed area is wrapped by a div with class name “tabs” and consists an unordered list ( ul) representing the clickable tab labels and a div containing tabs content. Each tab content resides within a div that has a unique id value and each list item ( li) contains an anchor with href value the id of its content. Notice that we don’t give any classes to the unordered list or the div below it. Since all our tabs markup sits within .tabs, we can target them in our CSS and script without the need of additional class names or ids. The active-tab and active-tab-content classes indicate the currently active/visible tab. In our markup, by adding those 2 classes to the first list item and the #tab-1 div, we make the first tab and its content visible. We could of course add those classes to any other li and div for having other tab visible on page load. The CSS Next, we need to transform the simple HTML markup to actual tabs. Add the following CSS rules: .tabs{ width:380px; } .tabs>ul,.tabs>div{ position:relative; } .tabs>ul{ overflow:hidden; margin:0; padding:0; list-style-type:none; z-index:2; } .tabs>ul>li{ float:left; position:relative; margin:0 -1px 0 0; } .tabs>ul>li>a{ display:inline-block; padding:5px 10px; background:#eee; border:1px solid #999; } .tabs>ul>li.active-tab>a{ background:#fff; border-bottom-color:#fff; } .tabs>div{ background:#fff; z-index:1; border:1px solid #999; top:-1px; } .tabs>div>div{ position:relative; top:0; left:0; display:none; overflow:hidden; padding:10px; } .tabs>div>div.active-tab-content{ display:block; } Nothing fancy here, just enough CSS to turn that plain list and divs to tabs. We “hide” tabs content by applying display: none on the divs and display: block; on the .active-tab-content which indicates the initially visible tab. The tabs certainly look plain (or just ugly!) but we’ll make them pretty later. First, we need to make them work. The script We’ll write some simple javascript (more specifically jQuery) that’ll toggle .active-tab & .active-tab-content upon clicking a tab. What we want, is to remove those active classes from the currently visible tab (both from tab label and content) and add them to the one that’s being clicked. First, include the jQuery library: The code above can be inserted inside the head tag or at the very bottom of the document, before the closing body tag (which is normally recommended for better performance). In either case, it’s more efficient to include the CSS before any javascript (usually inside the head tag). We’re using Google’s CDN to get jquery library (why?). After jQuery inclusion, we can start coding the script that toggles tabs. We want our script to run on document ready (meaning the code will execute after the DOM is ready), so we start by adding: (function($){ $(document).ready(function(){ /* ... */ }); })(jQuery); We’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info. If your tabs content include elements with external sources (e.g. images, objects etc.) you should use window load ( $(window).load()) instead of document ready, so the code executes after all page elements are fully loaded: (function($){ $(window).load(function(){ /* ... */ }); })(jQuery); By this point, the full page markup will look like this: HTML Tabs    .tabs{ width:380px; } .tabs>ul,.tabs>div{ position:relative; } .tabs>ul{ overflow:hidden; margin:0; padding:0; list-style-type:none; z-index:2; } .tabs>ul>li{ float:left; position:relative; margin:0 -1px 0 0; } .tabs>ul>li>a{ display:inline-block; padding:5px 10px; background:#eee; border:1px solid #999; } .tabs>ul>li.active-tab>a{ background:#fff; border-bottom-color:#fff; } .tabs>div{ background:#fff; z-index:1; border:1px solid #999; top:-1px; } .tabs>div>div{ position:relative; top:0; left:0; display:none; overflow:hidden; padding:10px; } .tabs>div>div.active-tab-content{ display:block; }              First       Second       Third       Fourth           First   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Second   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Third   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Fourth   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. (function($){ $(document).ready(function(){ /* ... */ }); })(jQuery); Continue with the script by binding the click event on each anchor element inside the unordered list: (function($){ $(document).ready(function(){ var tabs=$(".tabs"), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"); tabLabel.click(function(e){ e.preventDefault(); }); }); })(jQuery); First, we define and cache our selectors in 3 variables: tabs, tabsLabels and tabLabel and then, we bind the click event on the anchor inside each list item which we’ve stored in tabLabel. Adding e.preventDefault(); inside the click function prevents the default browser behavior when a link is clicked (e.g. page jumping on the anchor point of the href value). At first, it might seem unnecessary that we define all those variables and store every selector in one. We could certainly do something like this: $(".tabs>ul a").click(function(e){ e.preventDefault(); }); But we won’t. It’s actually good to make a habit of storing selectors in variables. Firstly, they’re always cached resulting in better performance (non-repeated jQuery selection operations) and secondly, you can easily access them from everywhere in your code, making much easier to change any selector. What we need now, is to get the href value of the clicked anchor, find the equivalent tab content via its id attribute and store both in 2 variables: tabID and targetTab (function($){ $(document).ready(function(){ var tabs=$(".tabs"), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); tabLabel.click(function(e){ e.preventDefault(); var tabID=$(this).attr("href"), targetTab=tabsContent.find(tabID); }); }); })(jQuery); We also define another variable: tabsContent, in order to cache it and access it later. We can now easily toggle .active-tab and .active-tab-content on the element we want: (function($){ $(document).ready(function(){ var tabs=$(".tabs"), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); tabLabel.click(function(e){ e.preventDefault(); var tabID=$(this).attr("href"), targetTab=tabsContent.find(tabID), activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); $(this).parent().addClass("active-tab"); targetTab.addClass("active-tab-content"); }); }); })(jQuery); What we do here is find .active-tab and .active-tab-content elements, store them in same-name variables and remove those same classes (via $.removeClass function). Then, we add .active-tab class to the (parent) list item that contains the clicked link and add .active-tab-content to the element we’ve stored in targetTab variable previously (using the $.addClass jQuery function). This is the most basic script for fully functional tabs (live example). The complete page markup should be: HTML Tabs    .tabs{ width:380px; } .tabs>ul,.tabs>div{ position:relative; } .tabs>ul{ overflow:hidden; margin:0; padding:0; list-style-type:none; z-index:2; } .tabs>ul>li{ float:left; position:relative; margin:0 -1px 0 0; } .tabs>ul>li>a{ display:inline-block; padding:5px 10px; background:#eee; border:1px solid #999; } .tabs>ul>li.active-tab>a{ background:#fff; border-bottom-color:#fff; } .tabs>div{ background:#fff; z-index:1; border:1px solid #999; top:-1px; } .tabs>div>div{ position:relative; top:0; left:0; display:none; overflow:hidden; padding:10px; } .tabs>div>div.active-tab-content{ display:block; }              First       Second       Third       Fourth           First   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Second   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Third   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Fourth   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. (function($){ $(document).ready(function(){ var tabs=$(".tabs"), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); tabLabel.click(function(e){ e.preventDefault(); var tabID=$(this).attr("href"), targetTab=tabsContent.find(tabID), activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); $(this).parent().addClass("active-tab"); targetTab.addClass("active-tab-content"); }); }); })(jQuery); From here on, we’ll continue optimizing and extending the script, make tabs look much better and explore different ways of loading tabs content. Extending the script Adding the active tab classes automatically Instead of adding the active tab classes manually in the markup, we’ll add few extra lines of code in the script to automate the process, avoiding that extra step each time we create a tabbed area. We’ll create a condition that checks if .active-tab exists (cause we might need to have other than the first tab visible when page loads) and if it does, we apply the .active-tab-content on the content div with the equivalent id. If .active-tab does not exist in the markup, we add the active classes on the first list item and content div: (function($){ $(document).ready(function(){ var tabs=$(".tabs"), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); if(tabsLabels.find(".active-tab").length===0){ /* .active-tab does not exist. Make the 1st tab active */ tabsLabels.children("li:first").addClass("active-tab"); tabsContent.children("div:first").addClass("active-tab-content"); }else{ /* .active-tab exists. Find tab content id based on its children anchor href value */ tabsContent.find(tabsLabels.find(".active-tab a").attr("href")).addClass("active-tab-content"); } tabLabel.click(function(e){ e.preventDefault(); var tabID=$(this).attr("href"), targetTab=tabsContent.find(tabID), activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); $(this).parent().addClass("active-tab"); targetTab.addClass("active-tab-content"); }); }); })(jQuery); The script now activates the first tab by default. If for example we want to have the second tab active on page load, we simply add the .active-tab to the second li (we don’t bother at all with the .active-tab-content). Making the script bulletproof Within our script we can do some pretty cool tricks and one of them is connecting each tab label ( li) to its content (div) by their DOM index number. By doing this, the tabs will be able to function more indipendently from a strict markup and we also avoid the need of having href and id values in the HTML. In order to make it as versatile as possible, we should consider a situation where we might want to keep some or all href and ids, so we’re going to make the script “smart” enough to work regardless of attributes existence. We create an additional condition that checks a)if the .active-tab anchor has an href attribute, b)if its value is not “#”, c)if its value starts with “#” and d)if it has an equivalent div (a content div with an id attribute equal to its href). If all those conditions are met, the script will use the href value that corresponds to a div id and if not, it’ll find the “correct” div by its index number within the DOM. We add this condition in 2 places: inside the click event (see location 1 comment) and inside our previous condition (location 2 comment): (function($){ $(document).ready(function(){ var tabs=$(".tabs"), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); if(tabsLabels.find(".active-tab").length===0){ tabsLabels.children("li:first").addClass("active-tab"); tabsContent.children("div:first").addClass("active-tab-content"); }else{ /* location 1 */ var activeTabVal=tabsLabels.find(".active-tab a").attr("href"); if(activeTabVal && activeTabVal!="#" && activeTabVal.substring(0)==="#" && tabsContent.find(activeTabVal).length!=0){ /* find content based on id */ tabsContent.find(activeTabVal).addClass("active-tab-content"); }else{ /* find content based on DOM index */ tabsContent.children("div").eq(tabsLabels.find(".active-tab").index()).addClass("active-tab-content"); } } tabLabel.click(function(e){ e.preventDefault(); var tabID=$(this).attr("href"), targetTab, /* we remove the previous value to avoid js errors */ activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); /* location 2 */ if(tabID && tabID!="#" && tabID.substring(0)==="#" && tabsContent.find(tabID).length!=0){ /* find content based on id */ targetTab=tabsContent.find(tabID); }else{ /* find content based on DOM index */ tabID=$(this).parent().index(); targetTab=tabsContent.children("div").eq(tabID); } activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); $(this).parent().addClass("active-tab"); targetTab.addClass("active-tab-content"); }); }); })(jQuery); The script now is able to tell which tab label corresponds to which content, even if the markup doesn’t make much sense. For example, our tabs will work as expected despite the following sloppy markup (example): First         Second         Third         Fourth             First   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Second   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Third   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Fourth   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Styling the tabs Moving CSS to external stylesheet In order to make tabs implementation easier and have a maintainable stylesheet, we need to move tabs CSS to an external file. Create a new .css document, save it as tabs.css and copy all CSS rules inside it. Link the external CSS file by inserting inside the head tag of the HTML, replacing the style tag. Design! By applying some CSS gradients, rounded corners and shadows, we can make the tabs look pretty cool, without the need for background images: .tabs{ margin:40px; width:380px; font-family:georgia,serif; font-size:13px; font-style:italic; color:#666; text-shadow:0 1px rgba(255,255,255,0.9); } .tabs>ul,.tabs>div{ position:relative; } .tabs>ul{ overflow:hidden; margin:0; padding:0; list-style-type:none; margin:0 4px; padding:3px 0 0 0; z-index:2; } .tabs>ul>li{ float:left; position:relative; margin:-3px -1px 0 0; } .tabs>ul>li>a{ display:inline-block; padding:5px 10px; text-decoration:none; color:#f5f5f5; font-weight:bold; text-shadow:0 -1px rgba(0,0,0,0.5); background:#bbb; background:-o-linear-gradient(top, #ddd, #999); background:-moz-linear-gradient(top, #ddd, #999); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #999)); outline:none; -webkit-border-radius:4px 4px 0 0; -moz-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0; border:1px solid #888; -webkit-box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px -1px rgba(0,0,0,0.3); -moz-box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px -1px rgba(0,0,0,0.3); box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px -1px rgba(0,0,0,0.3); } .tabs>ul>li>a:hover{ color:#fff; background:#ccc; background:-o-linear-gradient(top, #eee, #999); background:-moz-linear-gradient(top, #eee, #999); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #999)); } .tabs>ul>li.active-tab>a{ color:#555; text-shadow:0 1px rgba(255,255,255,0.9); background:#e5e5e5; background:-o-linear-gradient(top, #ddd, #e5e5e5); background:-moz-linear-gradient(top, #ddd, #e5e5e5); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ddd), color-stop(1, #e5e5e5)); -webkit-box-shadow:inset 0 2px 0 #fff; -moz-box-shadow:inset 0 2px 0 #fff; box-shadow:inset 0 2px 0 #fff; border-bottom-color:#e5e5e5; } .tabs>div{ z-index:1; top:-1px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; border:1px solid #888; background:#e5e5e5; background:-o-linear-gradient(top, #e5e5e5, #f5f5f5); background:-moz-linear-gradient(top, #e5e5e5, #f5f5f5); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #e5e5e5), color-stop(1, #f5f5f5)); -webkit-box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15),0 3px 4px -2px rgba(0,0,0,0.25); -moz-box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15),0 3px 4px -2px rgba(0,0,0,0.25); box-shadow:inset 0 -2px 0 rgba(0,0,0,0.15),0 3px 4px -2px rgba(0,0,0,0.25); } .tabs>div>div{ position:relative; top:0; left:0; display:none; overflow:hidden; padding:10px 15px; } .tabs>div>div.active-tab-content{ display:block; } The shadows and light gradients give tabs a subtle 3D look & feel. Adding negative top margin on the list items, removes the unwanted bottom space that would appear between 2 or more rows of tab labels. Moreover, it makes our tabs look more realistic as if they’re stacked on top of each other. Tab labels ( li) are floated left, so having many means that the ones overflowing the width of .tabs, will normally wrap to a new line. This will cause empty areas on the right side of tab labels rows. Since there’s no float:bottom in CSS, it can be visually “wrong” having a narrow tabs row below a wider one. Normally, we’d always want our widest row at the bottom and we can do that manually, by using CSS nth-child to apply a clear:left property on any tab we want. For example, if we want to place the 3rd tab label on a new line, we can do: .tabs>ul>li:nth-child(3){ clear:left; } Turning script into plugin In order to have multiple tabbed areas on a single page, we have to give them different class names or ids (e.g. .tabs, .tabs-2, .tabs-3 etc.) and manually repeat the script for each one, making implementation slow and frustrating. Fortunatelly, we can transform our script into a proper plugin with few extra lines of code. The first step is to move the entire jQuery code to an external javascript file (same as we did with css). Create a new document, save it as tabs.js. and insert the following code: (function($){ $.fn. Tabs=function(){ return this.each(function(){ /* ... */ }); } })(jQuery); We created a function called Tabs that’ll hold and run the script on each element we pass it as its selector (more on this later). Next, we insert our script inside jQuery $.each function, changing var tabs=$(".tabs") to var tabs=$(this) (so the script runs the same code on each selector): (function($){ $.fn. Tabs=function(){ return this.each(function(){ var tabs=$(this), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); if(tabsLabels.find(".active-tab").length===0){ tabsLabels.children("li:first").addClass("active-tab"); tabsContent.children("div:first").addClass("active-tab-content"); }else{ var activeTabVal=tabsLabels.find(".active-tab a").attr("href"); if(activeTabVal && activeTabVal!="#" && activeTabVal.substring(0)==="#" && tabsContent.find(activeTabVal).length!=0){ tabsContent.find(activeTabVal).addClass("active-tab-content"); }else{ tabsContent.children("div").eq(tabsLabels.find(".active-tab").index()).addClass("active-tab-content"); } } tabLabel.click(function(e){ e.preventDefault(); var tabID=$(this).attr("href"), targetTab, activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); if(tabID && tabID!="#" && tabID.substring(0)==="#" && tabsContent.find(tabID).length!=0){ targetTab=tabsContent.find(tabID); }else{ tabID=$(this).parent().index(); targetTab=tabsContent.children("div").eq(tabID); } activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); $(this).parent().addClass("active-tab"); targetTab.addClass("active-tab-content"); }); }); } })(jQuery); Include tabs.js in the document below the jQuery inclusion and call the Tabs function on the element(s) you want: (function($){ $(document).ready(function(){ $(".tabs"). This will tranform all .tabs within the page into tabbed areas. Additionally, we can add multiple selectors by separating them with comma: Extras Adding transition effects We can further enhance the look ↦ feel of tabbed areas by adding fade and height animations when switching between tabs (see it in action). Clicked tab content will fade-in and its container height will animate accordingly. We’ll use jQuery $.fadeIn and $.fadeOut, as well as $.animate functions. For convenience, We will also set the transition speed via a function parameter. Edit tabs.js and add the effects: (function($){ $.fn. Tabs=function(speed){ return this.each(function(){ var tabs=$(this), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"); if(!speed){ speed=0; /* default transition speed */ } if(tabsLabels.find(".active-tab").length===0){ tabsLabels.children("li:first").addClass("active-tab"); tabsContent.children("div:first").addClass("active-tab-content").fadeIn(speed); /* fade-in first tab */ }else{ var activeTabVal=tabsLabels.find(".active-tab a").attr("href"); if(activeTabVal && activeTabVal!="#" && activeTabVal.substring(0)==="#" && tabsContent.find(activeTabVal).length!=0){ tabsContent.find(activeTabVal).addClass("active-tab-content").fadeIn(speed); /* fade-in active tab */ }else{ tabsContent.children("div").eq(tabsLabels.find(".active-tab").index()).addClass("active-tab-content").fadeIn(speed); } } tabsContent.css({"height":tabs.find(".active-tab-content").outerHeight()}); tabLabel.click(function(e){ e.preventDefault(); var tabLink=$(this), tabID=tabLink.attr("href"), targetTab, activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); if(tabID && tabID!="#" && tabID.substring(0)==="#" && tabsContent.find(tabID).length!=0){ targetTab=tabsContent.find(tabID); }else{ tabID=tabLink.parent().index(); targetTab=tabsContent.children("div").eq(tabID); } /* tabs switching */ activeTabContent.stop().fadeOut(speed,function(){ activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); tabLink.parent().addClass("active-tab"); targetTab.addClass("active-tab-content").css({"opacity":0,"display":"block"}); tabsContent.stop().animate({height:targetTab.outerHeight()},speed,function(){ targetTab.stop().animate({opacity:1},speed); }); }); }); }); } })(jQuery); In the new code above, we chained the $.fadeIn function after each $.addClass and added the speed parameter in our Tabs function. At the end of the click event, you can see all the fade and height animation functions that do the following: - Fade-out current tab content - Remove active classes after fade-out animation is complete - Add active-tab class to the clicked tab - Add active-tab-content class to targetTab, set its display to block and apply zero opacity so we can fade it in later - Animate tabs content div height according to targetTab height - Fade-in the clicked tab content by animating its opacity from zero to one To set the transition speed, we pass the value on the speed parameter: (function($){ $(document).ready(function(){ $(".tabs"). Tabs("fast"); }); })(jQuery); The value can be “fast”, “slow” or an integer (e.g. 700) for milliseconds. If we don’t pass any parameter value, the speed defaults to zero ( if(!speed){ speed=0; }) which will make tabs switching instantaneous. Ajax! There are times when we need to load tabs content dynamically via ajax, so this is what we’re going to do next. We’re going to integrate ajax functionality in the plugin so we can have static or dynamic content on each tab. It’s always a good practice to have some kind of indicator that the content requested is loading, so we’ll need an animated gif image as a preloader icon for the ajax calls. You can create your own image or you can use the one on the demo. Open tabs.css and add the preloader styling: .tabs .ajax-loader{ position:absolute; display:none; width:24px; height:24px; line-height:24px; text-align:center; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background:url(ajax-loader.gif) no-repeat center center; overflow:hidden; top:25px; left:50%; margin-left:-12px } The preloader has the class “ajax-loader” and the element itself will be inserted in the markup (only if needed) by the script. We’ve set the ajax-loader.gif as its background but if you’re using another image change it accordingly. Next, we need to set each tab content by adding their paths in our tab anchors href attributes: First       Second       Third       Fourth The first tab will load ajax-content/tab_1_content.html, the second ajax-content/tab_2_content.html and so on… We’ve also removed the tabs content divs below the ul, since we no longer have static tabs content in our page. All required markup for the ajax content will be generated by the script. Since we’ll be integrating static and dynamic content for the tabs, we’re gonna change few parts of the script by creating a couple of functions that we’ll use for both methods in addition to the parts where we generate the markup for the content and preloader. We’ll write the code in such way that we’ll be able to have both static and dynamic content in a single tabbed area. Open tabs.js and insert the new code: (function($){ $.fn. Tabs=function(speed){ return this.each(function(){ var tabs=$(this), tabsLabels=tabs.children("ul"), tabLabel=tabsLabels.find("a"), tabsContent=tabs.children("div"), tabLink, tabsLoader=tabsContent.children(".ajax-loader"); if(!speed){ speed=0; } if(tabsContent.length===0){ tabs.append(" "); tabsContent=tabs.children("div"); tabsLabels.children("li").each(function(){ tabsContent.append(" "); }); }else{ tabsContent.children("div").each(function(){ if($.trim($(this).text())===""){ $(this).addClass("ajax-tab-content"); } }); } if(tabsLoader.length===0 && tabsContent.children("div.ajax-tab-content").length>0){ tabsContent.append(" "); tabsLoader=tabsContent.children(".ajax-loader"); } if(tabsLabels.find(".active-tab").length===0){ tabsLabels.children("li:first").addClass("active-tab"); } tabLink=tabsLabels.find(".active-tab a"); tabsContent.css({"height":tabsContent.height()}); LoadTabContent(FindTabContent(tabLink),tabLink); tabLabel.click(function(e){ e.preventDefault(); tabLink=$(this); LoadTabContent(FindTabContent(tabLink),tabLink); }); function FindTabContent(tabLink){ var targetTab, tabID=tabLink.attr("href"); if(tabID && tabID!="#" && tabID.substring(0)==="#" && tabsContent.find(tabID).length!=0){ targetTab=tabsContent.find(tabID); }else{ tabID=tabLink.parent().index(); targetTab=tabsContent.children("div").eq(tabID); } return targetTab; } function LoadTabContent(targetTab,tabLink){ var activeTab=tabsLabels.find(".active-tab"), activeTabContent=tabsContent.find(".active-tab-content"); if(activeTabContent.length===0){ activeTabContent=targetTab; } activeTabContent.stop().fadeOut(speed,function(){ activeTab.add(activeTabContent).removeClass("active-tab active-tab-content"); tabLink.parent().addClass("active-tab"); if(targetTab.is(".ajax-tab-content")){ tabsLoader.stop().fadeIn(speed); targetTab.load(tabLink.attr("href"),function(){ var targetTabImages=targetTab.find("img"), targetTabImagesLoaded=0; if(targetTabImages.length>0){ targetTabImages.bind("load",function(){ targetTabImagesLoaded++ if(targetTabImagesLoaded>=targetTabImages.length){ tabsLoader.stop().fadeOut(speed); ShowTabContent(); } }); }else{ tabsLoader.stop().fadeOut(speed); ShowTabContent(); } }); }else{ ShowTabContent(); } function ShowTabContent(){ targetTab.addClass("active-tab-content").css({"opacity":0,"display":"block"}); tabsContent.stop().animate({height:targetTab.outerHeight()},speed,function(){ targetTab.stop().animate({opacity:1},speed); }); } }); } }); } })(jQuery); What we roughly did here is define and set .ajax-loader, add tabs content markup, apply the .ajax-tab-content class to the div(s) that’ll hold ajax content and create 2 main functions: FindTabContent & LoadTabContent. Those functions will trigger on page load and click event. Inside the LoadTabContent function we’ve added the jQuery $.load() function that loads the external content. I’ve made a fully commented script available on github:gist (https://gist.github.com/3812245) so you can see exactly what each code line does. The new script allows us to have static and ajax tabs content in the same tabbed area (see example). The markup for this, is adding empty divs for the ajax content and divs with actual content for the static ones. For example: First       Second       Third       Fourth                 Second   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Fourth   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo. Additionally, you can apply the ajax-tab-content class to any div you want to load content via ajax, even if it’s not empty. For instance, the following div will load ajax content instead of displaying the static one in it: Second   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. That’s the end of the tutorial. The next page contains a quick guide on implementing the plugin included in the archive. Pages: 1 2
1.1 1.2 1.3 1.4 1.5 1.6 2.1 2.2 2.3 2.4 2.5 2.6 2.7 3.1 4.1 5.1 7.1 9.1 11.1 14.1 15.1 19.1 20.1 21.1 24.1 27.1 27.2 28.1 29.1 51.1 53.1 54.1 55.1 56.1 57.1 58.1 59.1 60.1 61.1 62.1 67.1 68.1 68.2 68.3 68.4 68.5 69.1 70.1 70.2 70.3 70.4 70.5 70.6 71.1 72.1 72.2 72.3 72.4 72.5 73.1 73.2 73.3 73.4 73.5 73.6 73.7 74.1 74.2 74.3 74.4 74.5 74.6 75.1 76.1 79.1 80.1 81.1 82.1 83.1 84.1 86.1 87.1 88.1 89.1 91.1 92.1 93.1 94.1 96.1 97.1 98.1 99.1 101.1 101.2 101.3 101.4 101.5 101.6 102.1 102.2 102.3 102.4 102.5 102.6 103.1 104.1 105.1 106.1 106.2 117.1 117.2 117.3 117.4 117.5 117.6 117.7 117.8 117.9 117.10 118.1 119.1 121.1 122.1 124.1 125.1 126.1 127.1 128.1 129.1 131.1 132.1 133.1 134.1 135.1 136.1 137.1 138.1 140.1 141.1 142.1 143.1 144.1 145.1 146.1 147.1 148.1 149.1 150.1 152.1 153.1 154.1 155.1 156.1 157.1 160.1 160.2 160.3 160.4 160.5 160.6 161.1 163.1 166.1 166.2 166.3 167.1 168.1 169.1 170.1 171.1 173.1 174.1 175.1 176.1 177.1 178.1 180.1 181.1 182.1 182.2 186.1 187.1 188.1 189.1 190.1 195.1 195.2 195.3 196.1 197.1 198.1 199.1 201.1 202.1 203.1 204.1 206.1 207.1 208.1 209.1 211.1 212.1 213.1 215.1 216.1 217.1 218.1 219.1 220.1 222.1 224.1 226.1 228.1 230.1 231.1 232.1 233.1 233.2 233.3 233.4 234.1 237.1 242.1 243.1 248.1 249.1 249.2 249.3 249.4 250.1 250.2 250.3 251.1 252.1 253.1 254.1 255.1 256.1 257.1 258.1 259.1 260.1 261.1 263.1 264.1 265.1 266.1 267.1 269.1 270.1 271.1 272.1 273.1 275.1 276.1 277.1 278.1 279.1 281.1 282.1 283.1 285.1 285.2 285.3 286.1 287.1 288.1 292.1 295.1 301.1 305.1 306.1 307.1 314.1 317.1 323.1 323.2 323.3 323.4 323.5 324.1 324.2 324.3 324.4 325.1 326.1 327.1 328.1 329.1 331.1 332.1 333.1 334.1 336.1 337.1 338.1 340.1 341.1 341.2 341.3 341.4 342.1 343.1 343.2 345.1 348.1 348.2 349.1 350.1 351.1 352.1 353.1 354.1 355.1 357.1 357.2 358.1 359.1 359.2 359.3 359.4 359.5 359.6 359.7 360.1 361.1 361.2 361.3
Evo nas opet na istom mjestu sa drugim web dizajn stilom. U ovom tutorialu naučit ćete izraditi moderan Web 2.0 dizajn minimalističkog izgleda. Ovakav dizajn savršen je za stranice poslovne tematike. Kao što i sami možete vidjeti, poslovno ne mora uvijek značiti dosadno. Uz malo boje i par kreativnih elemenata uštogljenost poslovnog svijeta pretvaramo u veselo predstavljanje tvrtke. Izabrali samo Web 2.0 stil iz jednostavnog razloga što on znači moderno, ultra-hip, a to je upravo ono kakvim želimo predstaviti našeg klijenta. Koristili smo Twitter kao izvor informacija za naše imaginarne klijente u vezi poslovanja tvrtke. Twitter je inače servis za dijeljenje informacija sa rodbinom, prijateljima ili čitavim svijetom. Na njemu možete objavljivati što god želite (npr. što trenutno radite) te svi koji znaju vaš Twitter nadimak mogu to i vidjeti. Mi smo na naše stranice uz pomoć jQuery JavaScript library-a uključili Twitter stream. Umjesto dosadnih fontova na koje smo inače ograničeni upotrijebili smo sIFR tehnologiju i uključili moderan Gill Sans font. Naravno za kostur stranica koristili smo 960gs CSS Framework. Ako još niste, svakako pročitajte naš prošli tutorial te se pobliže upoznajte sa tim CSS alatom. Znači naučit ćete kako napraviti Web 2.0 dizajn, naučit ćete uključiti Twitter stream u vaše web stranice i upoznat ćete se sa sIFR (Scalable Inman Flash Replacement) tehnologijom. Krenimo redom, prvo ćemo kao i obično sastaviti kostur naših stranica (nemojte zaboraviti uključiti 960.css, text.css i reset.css iz 960gs CSS Framework-a) Struktura našeg Web 2.0 dizajna 940px - logo i search forma 940px - moto tvrtke i Slika 940px - meni 380px - Twitter stream 540px - vijesti 300px - o tvrtci 300px - linkovi 300px planovi 940px - footer Znači standardni 960gs grid kostur. Iza svakog reda dodajemo klasu clear, napominjemo još jednom da za detaljniji opis upotrebe 960gs CSS frameworka pogledate naš prošli tutorial. Ok, kostur imamo, a sada pogledajmo HEAD našeg dokumenta jer je nešto drugačiji od prošlog tutoriala. HEAD našeg Web 2.0 dizajna $(document).ready(function(){ join_text: "auto", username: "kroativ", // vaš Twitter username avatar_size: 32, // veličina slike vašeg Twitter avatar count: 5, // koliko unosa želimo prikazati auto_join_text_default: "rekli smo,", auto_join_text_ed: "mi", auto_join_text_ing: "mi smo", auto_join_text_reply: "odgovorili smo", auto_join_text_url: "pregledavali smo", loading_text: "učitavam twitter..." jQuery JavaScript library Između linija 2-9 imamo kao i u prošlom tutorialu 960gs stilove te na kraju naš stil (moj_style.css) za definiciju naših elemenata. Između linija 12-14 uključili smo jQuery JavaScript library. Što je to jQuery JavaScript library? Ukratko, jQuery je zbirka JavaScript funkcija i klasa za olakšanu interakciju između JavaScript-a i HTML-a. Umjesto da pišete tone JavaScript koda, uz pomoć JavaScript library-a kroz jednostavnu sintaksu zadatke obavljate brže i efikasnije. Twitter stream Za našu stranicu koristili smo jQuery Twitter plug-in, linije 23-39. Prvo smo uključili plug-in na liniji 14, te potom definirali njegove parametre na linijama 26-27. Osnovna jQuery sintaksa je $(document).ready(function(){ nakon koje dolaze ostale funkcije. Opise Twitter plug-in parametra možete vidjeti u samom kodu. Znači potrebno je definirati vaš username, a ostalo je sve po želji te vašim potrebama. Nakon što smo definirali sve parametre Twitter stream uključujemo u naš dokument tako da na željenom mjestu jednostavno dodamo   . Upotreba sIFR-a Između linija 16-21 nalazi se naša sIFR aplikacija. sIFR nam omogućava da u naše stranice uključimo bilo koji font. Mi ćemo ovdje pokriti osnove i naučit ćete kako ga koristii, a za pobliže informacije pogledajte službene stranice, primjere ili službeni demo. Za početak skinite sIFR i skinite naš source. Kada otvorite sIFR arhivu vidjet ćete foldere CSS, DEMO, FLASH i JS. Nama će biti potrebni css/sifr.css (za opće sifr stilove), flash/sifr.fla (za definiranje našeg fonta) i js/sifr.js (njega ne dirajte) te js/sifr-config.js (konfiguracija vašeg fonta). Otvorimo prvo sifr.fla u vašem Flash-u, vidjet ćete veliki MovieClip na glavnoj sceni, otvorite ga kako bi vidjeli njegovu scenu. Na njoj se nalazi Text Field, njega ne dirajte već nas samo zanima Font Family, po defaultu je odabrana Verdana, a mi odaberemo naš font. Mi smo koristili Gill Sans MT Pro – Light, vi možete koji god želite. Ostale postavke nemojte dirati osim opcije Character Embedding… Kliknite na tu opciju te samo dodajte u polje Include these characters ćčžšđŽĆČĐŠ za pravilan prikaz hrvatskih palatala u našim stranicama. Znači ništa nismo promijenili već samo dodali. Kada ste sve napravili idete na File/Export/Export Movie… te spremite vaš flash u direktorij script. Pazite da vam je Publish Settings ostao nepromijenjen po otvaranju sifr.fla, znači postavke za Flash 8 settings. Napravili smo naš ime_fonta.swf, spremili ga u direktorij script naših stranica i krećemo dalje. Zašto direktorij script? Dobra je praksa uvijek imati organizirani direktorij naših stranica, npr. [folder images za slike] – [folder style za css] – [folder script za skripte] itd… Kopirajte sifr.js i sifr-config.js u taj isti folder script, a sifr.css kopirajte u folder css. Ovo sve već imate ako ste otvorili naš source. Pogledajmo kako izgleda sifr-config.js: var gillsans = { src: 'script/gillsans.swf' sIFR.activate(gillsans); sIFR.replace(gillsans, { selector: 'h1#naslov', css: '.sIFR-root { background-color: transparent; color: #ffffff; letter-spacing: -1; font-size:48px }', offsetLeft:-1, wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h2', css: '.sIFR-root { letter-spacing: 1; color: #8db423; }', wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h3', css: '.sIFR-root { letter-spacing: 1; }', wmode: 'transparent' sIFR.replace(gillsans, { selector: 'h4', css: '.sIFR-root { letter-spacing: 1; color: #068eca; }', wmode: 'transparent' Na liniji 2 trebamo navesti putanju do našeg swf datoteke sa fontovim, sjetite se da smo ju stavili u script direktorij, na liniji 3 naveli smo postavke fonta kako bi točno definirali prikaz fonta u flashu. Kako to učiniti saznajte na ovim stranicama. Na liniji 6 aktiviramo naš novi font i u ostatku skripte definiramo koje da elemente sIFR zamijeni te njihove postavke. Saznajte više o svim mogućnostima na službenim stranicama. Ukratko, zamijenili smo H1 tag sa ID-em naslov (naš slogan tvrtke) i zamijenili smo H2, H3 te H4 elemente. Svi će biti automatski zamijenjeni našim fontom. Napomena: Ovo je najnovija verzija sIFR-a i iz nekog čudnog razloga developeri su stavili minimalnu podržanu verziju Opera browsera na 9.61. Otvorite originalni sifr.js iz sifr3-r436.zip folder js/source. Pronađite “9.61” oko linije 451 i promijenite u “9.0“. Sada će vam raditi i u Operi. Naravno, morat ćete zamijeniti i sifr.js u vašem script direktoriju. Naš source sadrži već izmijenjenu verziju Sada kad smo pokrili Twitter stream i sIFR uključivanje možemo krenuti na naš dizajn. Header Sva tri dijela našeg headera Započinjemo sa headerom koji sadrži logo tvrtke i formu za pretraživanje. Pogledajmo kako on izgleda: Header smo podijelili na 3 dijela. Prvi za logo i pretraživanje, drugi za slogan tvrtke i neku slike te treći za navigaciju. Prvom header box-u grid_12 dodali smo klasu top_header kojom smo samo definirali širinu box-a na 113px koliko nam je širina pozadinske slike tog dijela. Cijela pozadina nam je jedna slika sa nijansama sive i zelene koju smo ponavljali po X-u cijele stranice. Napravili smo dvije klase, logo i searchf. Klasi logo smo dodali float:left, a klasi searchf smo dodali float:right. Unutar forme, u naše tekstualno polje dodali smo funkciju onblur=”if(this.value==”) this.value=’upišite ključnu riječ’;” onfocus=”if(this.value==’upišite ključnu riječ’) this.value=”;”. Zgodna stvarčica koja kada korisnik dođe u fokus našeg polja briše defaultnu vrijednost i ako se sadržaj polja nije promijenio istu vrijednost vraća. Umjesto standardnog gumba za submit dodali smo   kako bi uključili sliku povečala. Pozicionirali smo element s klasom .search_button. Polgedajmo css za prvi dio headera: body { font: 14px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; background:#fff url(../images/main_bg.gif) repeat-x top left; .top_header { height:113px; } .logo { float:left; width:310px; height:79px; margin-top:15px; .searchf { float:right; width:310px; height:50px; margin-top:40px; text-align:right; position:relative; z-index:1; .moj_search { width:206px; height:22px; border:1px solid #4f4f4f; background:#383838 url(../images/searchf_bg.gif) repeat-x top left; margin:0; padding:0; padding-top:4px; padding-right:24px; padding-left:2px; color:#FFF; .search_button { width:21px; height:21px; position:absolute; top:4px; right:4px; Znači body elementu smo stavili bijelu pozadinsku boju i ponavljanje pozadinske slike samo po širini. Klasi logo smo definirali visinu i širinu te float:left. Klasi searchf smo definirali float:right, visinu i širinu te position:relative i z-index:1. Position i z-index morali smo definirati kako bi mogli postaviti search_button na željenu poziciju odnosno na kraj text fielda. Klasa moj_search sadrži stilove za tekstualno polje, definirali smo border, pozadinsku sliku (lagani gradient) i padding-right kako nam tekst ne bi prelazio ispod gumba. Definicija stila za naš submit gumb nalazi se u klasi search_button, naveli smo veliki z-index:10 da element bude ispred svih i absolute poziciju sa definiranim mjerama gornje i desne pozicije. Krenimo na moto tvrtke i glavnu sliku. Lorem ipsum dolor sit amet, dul consectetur adipisicing elit, sed do eiusmod tempor. Kao što i sami vidite ovaj dio je stvarno jednostavan. Opet smo grid_12 klasi pridodali klasu za definiciju širine odnosno .center_header (258px). Klasi center_header također smo dodali pozadinsku sliku, a H1 s ID-em naslov smo već definirali u sifr-config.js Pogledajmo CSS za slogan tvrtke i sliku: .center_header { height:258px; text-align:left; background:url(../images/header_slika.jpg) no-repeat 430px 50px; #naslov { width: 700px; height: 170px; margin: 30px 0 0 0; padding: 0px; text-align: left; Klasa center_header sadrži pozadinsku sliku koju smo pozicionirali 430px u desino i 50px od vrha, a ID naslov služi samo za pozicioniranje slogana tvrtke. Navigacija ili meni Navigacija je slična kao i u prošlom tutorialu sa jedinom razlikom što sada imam tabove. Vidjet ćete kako ih kreirati na vrlo jednostavan način. Tko? Što? Gdje? Kako? Zašto? Opet smo klasi grid_12 pridodali smo klasu .main_menu kojim smo definirali širinu (62px). Napravili smo ID navigacija u koji smo smjestili UL (unordered list) za naše kategorije. Znači isti postupak kao i u prošlom tutorialu. Pogledajmo CSS za meni: .main_menu { height:62px; text-align:right; #navigacija { padding: 5px 0; float:right; margin-top:32px; #navigacija ul { list-style: none; display: block; margin: 0 auto; #navigacija ul li { float: left; margin: 0; padding-top:5px; text-transform:uppercase; width:88px; height:30px; text-align:center; background:url(../images/tab.png) no-repeat top left; #navigacija ul li a:link, #navigacija ul li a:visited { text-decoration:none; #navigacija ul li a:hover, #navigacija ul li a:active { text-decoration:none; Znači opet klasični CSS list meni kojem smo dodali pozadinsku sliku našeg tab-a na svaki LI element unutar ID-a navigacija. Sadržaj Prvi dio sadržaja Centralni dio odnosno sadržaj podijelili smo na dva dijela. Prvi dio sadrži Twitter stream sa lijeve strane i male članke naše firme sa desne strane. U drugio dio smo stavili 3 box-a odnosno dijelove Tko smo mi? (malo informacija o tvrtci), Mi volimo (neki linkovi vezani uz tvrtku) i Planovi za budućnost. Pogledajmo konstrukciju prvog dijela (skraćena verzija, a cijelu možete pogledati u demu ili sourcu): Što se događa na Twitteru? Naslov Sadržaj Prisjetimo se, kada imamo više layera u nizu, prvo dodajemo klasu alpha, a drugom omega. Layeru grid_12 dodali smo inline css za gornju marginu od 15px, naravno da smo to mogli napraviti i kroz css klasu ali ovako je preglednije. Twitter stream stavili smo u grid_5 i dodali mu klasu alpha. Već smo prije napomenuli da je dovoljno umetnuti    na mjesto gdje želimo prikazati Twitter i jQuery plug-in će automatski ispuniti ostalo. Dodali smo stilizirani H4 tag sa naslovom i pozadinskom slikom autentične Twitter ptice. Layeru grid_7 dodali smo klasu omega i u njega ćemo staviti vijesti. Možemo dodavati koliko god vijesti želimo i sve ih stavljamo u layer klase vijesti. Stilizirani naslov postižemo sa H2 tagom kojeg smo definirali u sifr-config.js Pogledajmo CSS za prvi dio sadržaja: .vijesti { margin-top:10px; } h4.twitter { height:40px; padding-left:50px; padding-top:4px; background:url(../images/twitter.png) no-repeat top left; margin-top:10px; color:#068eca; font-size: 24px; line-height: 34px; .tweet { color: #000; } .tweet .tweet_list { list-style-type: none; margin: 0; padding: 0; .tweet .tweet_list li { overflow: auto; padding: 10px 5px; margin:0; border-bottom:1px dotted #ccc; .tweet .tweet_list li a { color: #068eca; } .tweet .tweet_list .tweet_even { background-color: #f8f4e8; } .tweet .tweet_list .tweet_avatar { padding-right: .5em; float: left; .tweet .tweet_list .tweet_avatar img { vertical-align: middle; border:1px solid #ccc; Vidite i sami, ništa spektakularno. Klasa vijesti samo ima gornju marginu od 10px da vijesti nisu stisnute, a Twitter smo ukrasili sa donjim iscrtkanim borderom te nam svaki drugi unos ima drugačiju pozadinsku boju (.tweet_even). H4 tag klase twitter sadrži nam pozadinsku sliku Twitter ptičice. Priča o 3 box-a Donji sadržaj i footer Prelazimo na drugi dio sadržaja koji smo namijenili za 3 box-a sa informacijama koje bi možda trebalo istaknuti na glavnoj stranici naše imaginarne tvrtke. Naslov Sadržaj Naslov Link Link Link Naslov Sadržaj Grid_12 klasi dodali smo inline css stil za gornju marginu od 20px kako bi malo razdvojili taj donji dio od ostatka. Napravili smo 3 layera klase grid_4 (znači 300px širine), prvom smo dodali klasu alpha, a zadnjem omega. Cijeli sadržaj box-a stavljali smo u klasu .small_box kojoj smo definirali pozadinsku boju i border. Unutar njega stavili smo tag H3 za naslove. H3 tag-u također smo dodali pozadinsku sliku oblih rubova, jednu od odlika Web 2.0 stila (layer nam je statične širine pa smo mogli koristiti statičnu pozadinsku sliku). Nakon toga dodajemo klasu .small_box_pic koja nam služi samo za umetanje slika ili ikona. Koristili smo besplatne ikone koje je napravila ekipa sa Deziner Folia. Pogledajte cijeli set i možete ih koristiti u sve svrhe. Cijeli tekstualni dio opet stavljamo u klasu .pade_ten za 10px padding-a oko teksta. Pogledajmo CSS korišten za donji dio sadržaja: h3.sub_naslov { background:url(../images/small_bg.png) no-repeat top left; padding:8px 0 8px 10px; margin:2px; .small_box { background-color: #eee; border:1px solid #e9e9e9; min-height:400px; .small_box_pic { text-align:center; margin-bottom:10px; .pade_ten { padding:10px; } Znači klasika, H3 tag klase .sub_naslov ima tu našu sliku pozadinskih rubova. Klasi .small-box dodali smo min-height:400px kako bi nam sva tri box-a uvijek bila iste veličine. Ravnajte se po box-u koji ima najveći height kako bi vam i ostali bili iste veličine. Tag min-height govori browseru koja je minimalna veličina layera. Footer Polako smo došli i do footera. Pošto smo sve važne informacije već prezentirali u footer stavljamo samo copyright informacije. © 2008 Naša Tvrtka U layer grid_12 dodali smo naš layer s ID-om footer koji sadrži copyright informacije. Definirali smo mu veličinu fonta, gornji border te smjer teksta. Pogledajmo CSS za ID footer: #footer { font-size:12px; margin:10px 0; padding:10px; text-align:center; border-top:1px dashed #89ab1d; Ovo nije potrebno objašnjavati, par standardnih css definicija. Pogledajmo kako nam izgledaju gotove stranice. Zaključak U ovom tutorialu naučili ste kako napraviti moderan Web 2.0 dizajn. Vidjeli ste i kako jednostavne stranice mogu biti lijepe te ste naučili prezentirati glavne stavke neke tvrtke bez upotrebe gomile slika. Znači jednostavnost + pravilna prezentacija informacije = dobar dizajn . Naučili ste kako iskoristiti popularne Web 2.0 servise za informiranje vaših posjetitelja te kako začiniti vaše stranice sIFR tehnologijom. Ovu šablonu možete upotrijebiti i za vaše osobne stranice. Njihova vesela priroda prigodna je praktički za sve vrste stranica, to nam je i bio cilj. Razbiti korporativnu monotoniju kreativnim dizajnom. PS: ovaj dizajn se neće dobro vidjeti u Internet Exploreru 6 no ovdje govorimo o Web 2.0 stilu, upravo izlazi verzija 8 tog browsera… Kako doskočiti ovom problemu pogledajte u našem članku o borbi protiv IE6 browsera… Ako ste skinuli naš source u njemu ćete pronaći i PSD file za ovaj dizajn, slobodno ga koristite kako god želite. Napravili ste nešto super? Pokažite nam, ostavite komentar…