Sliding JavaScript Dropdown Menu This script has been replaced by a new with multi-level support here. This lightweight JavaScript drop down menu script (~1.6kb) allows you to easily add smooth transitioning dropdowns to your website. This can be used for navigation, dropdown lists, info panels, etc. The script has been tested working in IE6, IE7, IE8, Firefox, Opera and Safari. The markup for the menu including the mouse events looks like the following. You can have as many dropdowns on one page as you like. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Click here for the demo. Click here to download the source. Click here for a vertical flyout version of this menu. By Request: Slideup version demo. Update 4/28/2008 – I have updated the HTML and CSS to use a definition list and an unordered list in lieu of the previous div-based layout. The following two tabs change content below.
CSS Sprites2 - It’s JavaScript Time A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own. The examples below demonstrate inline CSS Sprites2, the technique we’ll be covering in this article: Enter the jQuery#section1 We must note the non-trivial extra kilobytes that the library will add to your initial page loads. As for other JavaScript libraries? Basic HTML and CSS setup#section2 So far so good. Example 1: Basic CSS Sprites setup. The theory#section5
CSS3 Menu and Navigation Tutorials All of the CSS3 navigation tutorials we have for you today are all fully functional and could easily be used on a live site. But we do prefer to think of them all as being more experimental and proof-of-concept rather than being a robust end-product (a sprinkle of jQuery always makes everything better!). What they do offer is an opportunity to roll-up your sleeves and delve into some ground-breaking code. Anyway, here they all are: Creative CSS3 Animated Menus The idea of this tutorial is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using CSS transitions and animations. CSS3 Animated Dropdown Menu With this tutorial you will learn how to build this awesome CSS3 animated dropdown menu with some pretty cool features. Creating a Cool CSS3 Dropdown Menu With this tutorial you will be shown how to create a multilevel CSS3 dropdown menu that will render perfectly with Firefox, Chrome and Safari. CSS3 Animated Menu
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. Right, first of all, we need to have the ideas and the design structure for this tabbed interface. 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. 4. Alright, the fun part. 5.
Create a Fun Animated Navigation Menu With Pure CSS In recent years jQuery has become the easiest and best supported way to implement simple animations online. JavaScript is exceptionally good at what it does and this article is in no way an argument against it. However, CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. Introduction Your website’s navigation can communicate a lot about your business or service. However, if you’re ever creating a site that doesn’t necessarily have to be so professional, the navigation provides a great place to have a little fun and insert some personality. To get a glimpse of what we’ll be building, take a look at the live demo. Click Here to View Demo The HTML To start off our project, paste in the following blank HTML5 template. Next, throw a simple unordered list into the body portion. Believe it or not, that’s really all we need here. Basic Styles There’s nothing here you haven’t seen a thousand other places. Voila!
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. 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. Configuring your server to permit SSI Options +Includes XBitHack on <! <! <! <!
Circle Navigation Effect with CSS3 Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. The effect is done with CSS3 transitions. View demo Download source The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License. The Markup For this little CSS3 effect we will have a navigation structure that looks like the following: <div class="cn-nav"><a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url(.. In our demo we will make a jQuery template out of this and dynamically add the thumbnails for the previous and next images of the slider. The CSS Let’s see now, how to add the style for this navigation. The spans’ background image (righ and left arrow): Now, let’s define what the elements will look like on hover.
CSS3 Dropdown Menu While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.
Menu CSS en onglets, technique des images coulissantes par Douglas Bowman en octobre 2003, traduit en français par Xavier Boully. L'article original publié en anglais sur A List Apart, a été traduit en français avec l'autorisation de l'auteur Douglas Bowman et de Jeffrey Zeldman au nom de A List Apart. Une des possibilités méconnue de CSS repose sur la possibilité d'attacher des images à des calques, et ce faisant, de leur permettre de glisser les unes sur les autres pour la création d'effets particuliers. En l'état actuel de CSS2, ce mécanisme requière un élément HTML distinct pour chaque image. Mais dans bien des cas, le code introduit pour représenter les composants classiques de l'interface fournit déjà les éléments que nous pouvons exploiter pour cet usage. La navigation par onglets en est un bon exemple. Et si l'on prenait les mêmes balises HTML pour les transformer de cette façon : Où se cache l'innovation ? On a vu beaucoup d'innovation sur le plan du design de la navigation web, avant même que CSS ne soit répandue. Finitions Variations