Home Page / how to / Menus déroulants

Suckerfish dropdown menus

Il s'agit d'un menu développeé par Patrick Griffiths, Dan Web.
Les explications sont disponibles sur le site htmldog.

Exemple

C'est par ici...

Code à insérer

Créer un extrait "header2" (filtre:aucun) avec le code suivant.

$ddfound =false;
  function snippet_menuh($parent)
  {
  global $ddfound;
  $out = '';
  $childs = $parent->children();
  if (count($childs) > 0)
  {
  $out = '<ul>';
  if(!$ddfound) 
  {
  $out .= '<li><a href="' . URL_PUBLIC . '">Home</a></li>';
  $ddfound = true;
  }
  foreach ($childs as $child)
  $out .= '<li>'.$child->link().snippet_menuh($child).'</li>';
  $out.= '</ul>';
  }
  return $out;
  }

Créer un gabarit "Normal2" (Content-Type:text/html) avec le code suivant.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Suckerfish menu</title>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="description" content="A RadiantCMS like writen with PHP" />
  <meta name="keywords" content="php,cms,radian,design,theme,template,layout" />
  <meta name="author" content="Philippe Archambault" />
  <link rel="stylesheet" href="http://frog.office-web.net//public/stylesheets/styles.css" media="all" type="text/css" />

  <style type="text/css">
  #nav-m {
  font-size: 120%;
  }
  #nav-m ul {
  float: left;
  list-style: none;
  line-height: 1.2;
  background: white;
  font-weight: bold;
  padding: 0;
  border: 1px solid #012345;
  margin: 0 0 1em 0;
  }
  #nav-m a {
  display: block;
  width: 10em;
  w\idth: 6em;
  color: #012345;
  text-decoration: none;
  padding: 0.25em 2em;
  }
  #nav-m a.daddy {
  }
  #nav-m li {
  float: left;
  padding: 0;
  width: 10em;
  }
  #nav-m li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 14.4em;
  w\idth: 13.9em;
  font-weight: normal;
  border-width: 0.25em;
  margin: 0;
  }
  #nav-m li li {
  padding-right: 1em;
  width: 13em
  }
  #nav-m li ul a {
  width: 13em;
  w\idth: 9em;
  }
  #nav-m li ul ul {
  margin: -1.75em 0 0 14em;
  }
  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
  left: -999em;
  }
  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
  left: auto;
  }
  #nav-m li:hover, #nav-m li.sfhover {
  background: #bdd7e6;
  }
  </style>

  <script type="text/javascript"><!--//--><![CDATA[//><!--
  sfHover = function() {
  var sfEls = document.getElementById("nav-m").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
  }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
  //--><!]]></script>

  </head>
  <body>
  <div id="page">
  <?php $this->includeSnippet('header2'); ?>
  <div id="content">
  <h2><?php echo $this->title(); ?></h2>
  <?php echo $this->content(); ?> 
  <?php if ($this->hasContent('extended')) echo $this->content('extended'); ?> 
  </div> 
  <div id="sidebar">
  <?php echo $this->content('sidebar', true); ?>
  </div> <!-- end #sidebar -->
  <?php $this->includeSnippet('footer'); ?>
  </div>
  </body>
  </html>

Suckerfish dropdown menus

by Patrick Griffiths, Dan Webb
“DHTML” dropdown menus have notoriously involved nasty big chunks of JavaScript with numerous browser-specific hacks that render any otherwise neat, semantic HTML quite inaccessible. Oh, the dream of a lightweight, accessible, standards-compliant, cross-browser-compatible method! Enter Suckerfish Dropdowns.

Others explanations...

Example

Look at this...

Code

Create a snippet "header2" for example with this code.

<div id="header">
  <h1><a href="<?php echo URL_PUBLIC; ?>">Frog</a> <span>content management simplified</span></h1>
</div>
<?php
function snippet_menuh($parent)
{
    $out = '';
    $childs = $parent->children();
    if (count($childs) > 0)
    {
        $out = '<ul>';
        foreach ($childs as $child)
            $out .= '<li>'.$child->link().snippet_menuh($child).'</li>';
        $out.= '</ul>';
    }
    return $out;
}
?>
<ul id="nav-m">
<?php echo snippet_menuh($this->find('/')); ?>
</ul>

Create a layout "Normal2" for example with this code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Suckerfish menu</title>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="description" content="A RadiantCMS like writen with PHP" />
  <meta name="keywords" content="php,cms,radian,design,theme,template,layout" />
  <meta name="author" content="Philippe Archambault" />
  <link rel="stylesheet" href="http://frog.office-web.net//public/stylesheets/styles.css" media="all" type="text/css" />

  <style type="text/css">
  #nav-m {
  font-size: 120%;
  }
  #nav-m ul {
  float: left;
  list-style: none;
  line-height: 1.2;
  background: white;
  font-weight: bold;
  padding: 0;
  border: 1px solid #012345;
  margin: 0 0 1em 0;
  }
  #nav-m a {
  display: block;
  width: 10em;
  w\idth: 6em;
  color: #012345;
  text-decoration: none;
  padding: 0.25em 2em;
  }
  #nav-m a.daddy {
  }
  #nav-m li {
  float: left;
  padding: 0;
  width: 10em;
  }
  #nav-m li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 14.4em;
  w\idth: 13.9em;
  font-weight: normal;
  border-width: 0.25em;
  margin: 0;
  }
  #nav-m li li {
  padding-right: 1em;
  width: 13em
  }
  #nav-m li ul a {
  width: 13em;
  w\idth: 9em;
  }
  #nav-m li ul ul {
  margin: -1.75em 0 0 14em;
  }
  #nav-m li:hover ul ul, #nav-m li:hover ul ul ul, #nav-m li.sfhover ul ul, #nav-m li.sfhover ul ul ul {
  left: -999em;
  }
  #nav-m li:hover ul, #nav-m li li:hover ul, #nav-m li li li:hover ul, #nav-m li.sfhover ul, #nav-m li li.sfhover ul, #nav-m li li li.sfhover ul {
  left: auto;
  }
  #nav-m li:hover, #nav-m li.sfhover {
  background: #bdd7e6;
  }
  </style>

  <script type="text/javascript"><!--//--><![CDATA[//><!--
  sfHover = function() {
  var sfEls = document.getElementById("nav-m").getElementsByTagName("LI");
  for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
  this.className+=" sfhover";
  }
  sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
  }
  }
  }
  if (window.attachEvent) window.attachEvent("onload", sfHover);
  //--><!]]></script>

  </head>
  <body>
  <div id="page">
  <?php $this->includeSnippet('header2'); ?>
  <div id="content">
  <h2><?php echo $this->title(); ?></h2>
  <?php echo $this->content(); ?> 
  <?php if ($this->hasContent('extended')) echo $this->content('extended'); ?> 
  </div> 
  <div id="sidebar">
  <?php echo $this->content('sidebar', true); ?>
  </div> <!-- end #sidebar -->
  <?php $this->includeSnippet('footer'); ?>
  </div>
  </body>
  </html>

Copyright

All material on this website is copyright Patrick Griffiths unless another author is credited, in which case the copyright is theirs. All moral rights are hereby asserted.

Content may be quoted if accompanied by a credit to HTML Dog and the author (Patrick Griffiths, unless otherwise stated), and a link to (or statement of, if the credit is not published on the web) the relevant page on HTML Dog.

Material may not be used for profit without the express permission of the author.

Commentaires

0 comments