La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Le Menu de la gargote au ***. 2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links.

Présentations similaires


Présentation au sujet: "1 Le Menu de la gargote au ***. 2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links."— Transcription de la présentation:

1 1 Le Menu de la gargote au ***

2 2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links a:hover {;} Home Links … plus d'info :

3 3 les balises

4 4 Pure CSS Popups Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house Links A collection of things which interest me, and might interest you Away Who knows? Could be anywhere; you clicks the link and you takes your chances! Eric He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist" Kat She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do? Other Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff Pure CSS Popups If you've already seen the complexspiral demo, then this page layout probably seems a bit familiar. However, this time we aren't playing around with background images, or indeed images of any kind. Instead we're creating static-text popups purely through the power of CSS. The title of the page is intentional: there is no Javascript used in this document. For that matter, there aren't any images either. And once again, there are no proprietary extensions being employed here. It's all validated HTML and CSS, period, end of story. Hands-on: What to Do Any browser that does a good job of supporting positioning will get some of the stuff I did here correct, so continuing onward is probably worth it. The basic drill is this: mouse over the links on the left side of the page. Watch the space below the links. Make sure to mouse over all the links, back and forth, up and down... Again I say it: no Javascript was used in the making of this page. What the...? You lie! I do not. Here's how it's done. In every case, the "caption" text is a span element inside the actual hyperlinks. Here's one example from the source of this document: <a href="http://www.meyerweb.com/eric/css/">Links<span>A collection of things which interest me, and might interest you</span></a> To prevent the text from showing up when the page loads, I have the following style: div#links a span {display: none;} So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the display to block and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule: div#links a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black; font: 10px Verdana, sans-serif; text-align: center;} The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible ( display: block; ) and position it appropriately. Want to have even more fun? How about icons that appear on rollover ? A Minor Side Note Notice how the hyperlinks appear to overlay the main-content border, and how that overlap really lights up when you're hovering over a link but still has a gray stripe down the middle of the overlap. That's done with nothing more complicated than a border on the hyperlinks themselves, the color and style of which change during the hover: div#links a:hover {color: #411; background: #AAA; border-right: 5px double white;} This effect works because I set up everything so the borders on the hyperlinks actually overlaps the border of the main content area. Because I'm positioning these elements using pixel measures, I can get things to line up appropriately and then style them however I like. it's a bit of a trick, of course-- by sticking to shades of gray, it's easier for me to create translucency effects. Someone with a sufficiently keen color sense could probably come up with better stuff than I did. (Like not putting light text on a dark background, for starters.) Jump to css/edge home pure CSS popup images

45 45 Autre code /* Author : bieler batiste Company : doSimple : send me a mail for more informations : - remove ( PASDEPOURRIEL ) Short javascript function to create and handle a CSS navigation menu Copyright (C) 2004 Bieler Batiste This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA USA */ // the timeout for the menu var timeout = 1000; // not very clean but simple // the function can be run in the HTML for faster display // window.onload=initMenu; // creat timeout variables for list item // it's for avoid some warning with IE for( var i = 0; i < 100; i++ ) { eval("var timeoutli" + i + " = false;"); } // this fonction apply the CSS style and the event function initMenu() { // a test to avoid some browser like IE4, Opera 6, and IE Mac if ( browser.isDOM1 && !( browser.isMac && browser.isIE ) && !( browser.isOpera && browser.versionMajor < 7 ) && !( browser.isIE && browser.versionMajor < 5 ) ) { // get some element var menu = document.getElementById('menuv'); // the root element var lis = menu.getElementsByTagName('li'); // all the li // change the class name of the menu, // it's usefull for compatibility with old browser menu.className='menu'; // i am searching for ul element in li element for ( var i=0; i 0 ) { // improve IE key navigation if ( browser.isIE ) { addAnEvent(lis.item(i),'keyup',show); } // link events to list item addAnEvent(lis.item(i),'mouseover',show); addAnEvent(lis.item(i),'mouseout',timeoutHide); addAnEvent(lis.item(i),'blur',timeoutHide); addAnEvent(lis.item(i),'focus',show); // add an id to list item lis.item(i).setAttribute( 'id', "li"+i ); } function addAnEvent( target, eventName, functionName ) { // apply the method to IE if ( browser.isIE ) { //attachEvent dont work properly with this eval('target.on'+eventName+'=functionName'); } // apply the method to DOM compliant browsers else { target.addEventListener( eventName, functionName, true ); // true is important for Opera7 } // hide the first ul element of the current element function timeoutHide() { // start the timeout eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );"); } // hide the ul elements under the element identified by id function hideUlUnder( id ) { document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden'; } // show the first ul element found under this element function show() { // show the sub menu this.getElementsByTagName('ul')[0].style['visibility'] = 'visible'; var currentNode=this; while(currentNode) { if( currentNode.nodeName=='LI') { currentNode.getElementsByTagName('a')[0].className = 'linkOver'; } currentNode=currentNode.parentNode; } // clear the timeout eval ( "clearTimeout( timeout"+ this.id +");" ); hideAllOthersUls( this ); } // hide all ul on the same level of this list item function hideAllOthersUls( currentLi ) { var lis = currentLi.parentNode; for ( var i=0; i

46 46 Menu avec PHP et Mysql !

47 47 Menu crée avec php Mysql

48 48 menu.php

49 49 index.php

50 50 sql # # Structure de la table `site_structure` # CREATE TABLE `site_structure` ( `ID` int(10) NOT NULL default '0', `nom` varchar(40) NOT NULL default '', `fichier` varchar(40) NOT NULL default '', `repertoire` varchar(40) NOT NULL default '', `categorie_mere` int(10) NOT NULL default '0', PRIMARY KEY (`ID`) ) TYPE=MyISAM; # # Contenu de la table `site_structure` # INSERT INTO `site_structure` VALUES (21, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (22, 'Conversions multibases', 'calculatrice.php', 'mathematique', 65); INSERT INTO `site_structure` VALUES (23, 'Nombres premiers', 'nbrepremiers.php', 'mathematique', 65); INSERT INTO `site_structure` VALUES (24, 'Erreurs VBA', 'erreursvba.php', 'office', 64); INSERT INTO `site_structure` VALUES (25, 'Excel fonctions AN/FR', 'excelfonctionsanfr.php', 'office', 64); INSERT INTO `site_structure` VALUES (26, 'Raccourcis Office', 'raccourcisoff.php', 'office', 64); INSERT INTO `site_structure` VALUES (27, 'Erreurs STOP', 'erreursstop.php', 'windows', 63); INSERT INTO `site_structure` VALUES (28, 'Erreurs Windows XP', 'erreurswinxp.php', 'windows', 63); INSERT INTO `site_structure` VALUES (29, 'RunDLL', 'raccourcissysteme.php', 'windows', 63); INSERT INTO `site_structure` VALUES (30, 'Raccourcis Windows', 'raccourciswin.php', 'windows', 63); INSERT INTO `site_structure` VALUES (31, 'VxD', 'vxd.php', 'windows', 63); INSERT INTO `site_structure` VALUES (43, 'Longueurs', 'longueurs.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (44, 'Volumes', 'volumes.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (45, 'Masses', 'masses.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (48, 'Pressions', 'pressions.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (50, 'Vitesses', 'vitesses.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (51, 'Codes des langues', 'codes_langues.php', 'internet', 60); INSERT INTO `site_structure` VALUES (53, 'Codes ANSI', 'codesansi.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (58, 'Surfaces', 'surfaces.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (62, 'Internet Webmasters', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (63, 'Windows', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (64, 'Office', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (65, 'Mathématiques', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (67, 'Conversions', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (69, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 61); INSERT INTO `site_structure` VALUES (74, 'Erreurs Windows XP SP2', 'erreurssp2.php', 'windows', 63); INSERT INTO `site_structure` VALUES (75, 'Services', 'services.php', 'windows', 63); INSERT INTO `site_structure` VALUES (79, 'XHTML', 'xhtml.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (80, 'Nombre d\'or', 'nombredor.php', 'mathematique', 65); INSERT INTO `site_structure` VALUES (83, 'Fichier.htaccess', 'htaccess.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (85, 'Processus Windows', 'processus.php', 'windows', 63); INSERT INTO `site_structure` VALUES (90, 'Monnaies', 'conversionsmon.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (95, 'Excel formules', 'excel_formules.php', 'office', 64); INSERT INTO `site_structure` VALUES (97, 'Disques durs', 'disquesdurs.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (100, 'Pseudos', 'pseudogen.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (102, 'Claviers', 'claviers.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (103, 'Robots', 'robots.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (104, 'Référencement', 'refmoteurs.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (118, 'Blogs', 'blogs.php', 'internetwebmasters', 62);

51 51 Ajax le chargement dans la page de façon asynchrone facile le chargement des liens.


Télécharger ppt "1 Le Menu de la gargote au ***. 2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links."

Présentations similaires


Annonces Google