Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS
jQuery Tabbed Interface / Tabbed Structure Menu Tutorial Introduction Nowadays, a lot of websites are using tab based content as a way to save spaces in a webpage. I have seen a lot of wordpress websites using a tabbed interface for its category, posts, comments and random posts content. It's a good "space-saver" and if used it correctly, it can boost your website usability as well. Before we start, if you are looking for a web hosting company, this is a good review - Hostgator Review. My ideas:Buttons on the top, content reside in different DIV elements,Click on one of the buttons, it shows the relevant content;Click on other buttons, it hides the existing and display the correct one. The Design structure: * Thanks to WeFunction.com for the amazing icons Advertisement In case the image above doesnt load, allow me to explain the design structure again. The javascript loads the content based on the DIV's index in .boxBody. Therefore, arrangement of DIV in .boxBody must match with the arrangement of button in #tabMenu. 4. Alright, the fun part. 5.
Animated navigation items using jQuery — Tyssen Design Dave Shea recently published an article on A List Apart (ALA), CSS Sprites2 – It's JavaScript Time', about how to use jQuery to create the effect of animated rollovers on navigation items. The technique he outlines makes use of the same image replacement method as outlined in ALA's original Sprites article. The problem with this method however is that it uses a large negative text-indent to remove the default text from screen, and with images turned off in the browser, you don't see anything. This has accessibility implications not only from the perspective of those with disabilities, but also for those who deliberately turn images off, i.e. people on slower connections or those using handheld devices who are trying to limit the amount of information downloaded to their phone. When I do use image replacement, I prefer a method which leaves the text on screen when images are turned off – the Gilder Levin Ryznar Jacoubsen IR method, which I've written about before. And the javascript:
How to Code an Overlapping Tabbed Main Menu | Codepal Main navigation menu is that part of a website design that makes the whole site look lively and complete. But the most common type of navigation menu style still being used a lot is the tabbed navigation menu. Here is a tutorial on how to code an overlapping tabbed menu. There are various styles and techniques of creating a tabbed navigation menu and one of them is the tabbed overlaying or overlapped style in which each tab appears to be lying over the other and hence giving the whole menu a very realistic feel. ” Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. So I tried coding one into html and after I succeeding thought of sharing it with you all. Step 1.Gearing Up So before starting to code this kind of a tabbed navigation into html/css code, you first have to learn how to create one in photoshop first. Step 2. Align the tabs vertically using grids as shown in the image above. Step 3. <! Lets look at our main navigation menu.
Sexy Drop Down Menu w/ jQuery & CSS Jun 02 2009 Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I would like to go over how to create a sexy drop down menu that can also degrade gracefully. View Demo of Sexy Drop Down Menu Step1. First create an unordered list for your base top navigation. <ul class="topnav"><li><a href="#">Home</a></li><li><a href="#">Tutorials</a><ul class="subnav"><li><a href="#">Sub Nav Link</a></li><li><a href="#">Sub Nav Link</a></li></ul></li><li><a href="#">Resources</a><ul class="subnav"><li><a href="#">Sub Nav Link</a></li><li><a href="#">Sub Nav Link</a></li></ul></li><li><a href="#">About Us</a></li><li><a href="#">Advertise</a></li><li><a href="#">Submit</a></li><li><a href="#">Contact Us</a></li></ul> Step2. Step3. jQuery Conclusion Homepage
Create a Cool Animated Navigation with CSS and jQuery Animation and visual feedback are great ways to assist a user in navigating and interacting with a website. While traditionally Adobe's Flash was the goto for anything animated, these days with the magic of javascript we can avoid Flash altogether. Today we're going to build a really cool animated navigation menu using just CSS and jQuery. Demo and Source Code Overview The menu we're building can be seen in the screenshot below. I'm going to break this tutorial up into five sections as follows: Rough sketchCreating ResourcesWriting down the HTMLWriting down the CSSCreating the animation using jQuery Step 1 : Rough Sketch First of all let us see what we need to do here. So here's a rough idea of what we should do: We will split the page into 4 parts, header, navigation and content header and the rest of contentThe header area will be simple <div> containerThe navigation area will be split into several <div> container matching the menu item. The content will be a simple <div> container Step 4: CSS
Dynamic Drive CSS Library- Animated horizontal tabs Animated horizontal tabs Author: Dynamic Drive These sliding doors based blue tinted tabs "jump up" when selected, such as when the mouse rolls over each one. This is accomplished using a combination of relative positioning and padding on each tab. BTW, the amount the selected tab jump up can be easily adjusted- refer to the comments inside the CSS. Demo: The two images used: The CSS: Code Info Rate this code: Date Posted: 04/12/2008 Revision History: None Usage Terms: Click here Your Comments (47) Got a question or need help customizing this CSS code?
Apache Tutorial: Introduction to Server Side Includes Apache HTTP Server Version 1.3 You are looking at the documentation for the 1.3 version of the Apache HTTP Server, which is no longer maintained, and has been declared "end of life". If you are in fact still using the 1.3 version, please consider upgrading. The current version of the server is 2.4. Apache Tutorial: Introduction to Server Side Includes This article deals with Server Side Includes, usually called simply SSI. In the latter part of the article, we'll talk about some of the somewhat more advanced things that can be done with SSI, such as conditional statements in your SSI directives. What are SSI? SSI (Server Side Includes) are directives that are placed in HTML pages, and evaluated on the server while the pages are being served. The decision of when to use SSI, and when to have your page entirely generated by some program, is usually a matter of how much of the page is static, and how much needs to be recalculated every time the page is served. Options +Includes XBitHack on <! <!
Using jQuery for Background Image Animations After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best approach to creating the type of effect we're looking for (and I'm not the first to think so: see the examples at the end of this article). jQuery is a great library for this type of task but out of the box, it can't animate background position properly because of the need to animate two values instead of just one (too bad not all browsers implemented the non-standard background-position-x and -y like Internet Explorer). You'll have to use the Background-Position plugin that is linked in the demo (the original plugin is no longer available on the jQuery site). The HTML The Basic CSS Notice that a hover state has been declared. The Image Figure 1: The Swipe The Demo
Create an apple style menu and improve it via jQuery Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-indent style is currently one of my favorite menu styles, we will start from scratch and build such a menu in Photoshop, then create the needed HTML and CSS and last but not least improve it via jQuery. This is what we are going to build (don’t forget to hover over the menu) Since the Tutorial is rather long and comprehensive here is a short overview of the upcoming tasks: Part 1: Conceptional work First of all you should do some conceptional work since you need to know the height of your menu itemsyou need to know the width of your menu items, both in normal and hover state.you need to know how many items you want Part 2: Photoshop Part 3: HTML and CSS
How To Create a Pure CSS Dropdown Menu With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. View the pure CSS dropdown menu demo <nav><ul><li><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Articles</a></li><li><a href="#">Inspiration</a></li></ul></nav> First up we’ll need to create the HTML structure for our CSS menu. The first sets of sub-menus can then be added under the “Tutorials” and “Articles” links, each one being a complete unordered list inserted within the <li> of its parent menu option. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu.