Home Page / how to / Autre menu

Suckertree menus

Il s'agit d'un menu développé par Dynamic Drive inspiré par le suckerfish menu évoqué sur le site Alistapart.

.

Exemple

C'est par ici...

Code à insérer

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

<?php
  $ddfound =false;
  function snippet_menuv($parent)
  {
  global $ddfound;
  $out = '';
  $childs = $parent->children();
  if (count($childs) > 0)
  {
  $out = '<ul id="suckertree1">';
  if(!$ddfound) 
  {
  $out .= '<li><a href="' . URL_PUBLIC . '">Home</a></li>';
  $ddfound = true;
  }
  foreach ($childs as $child)
  $out .= '<li>'.$child->link().snippet_menuv($child).'</li>';
  $out.= '</ul>';
  }
  return $out;
  }
  ?>
  <div class="suckerdiv">
  <?php echo snippet_menuv($this->find('/')); ?>
  </div>

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><?php echo $this->title(); ?></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" />
  <style type="text/css">
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
  table { border-collapse:collapse; border-spacing:0; }
  fieldset,img { border:0; }
  address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
  ol,ul { list-style:none; }
  caption,th { text-align:left; }
  h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
  q:before,q:after { content:''; }
  abbr,acronym { border:0; }
  body {
  background: #221f20;
  color: #324F6A;
  font: 62.5% Tahoma, Verdana, Arial, Helvetica, sans-serif; 
  text-align: center;
  }
  /* links  */
  a {
  color: #7C90A1;
  text-decoration: underline;
  }
  a:hover { color: #234466; }
  /* headings */
  h1 {font-size:2em}  /* displayed at 24px */
  h2 {font-size:1.5em}  /* displayed at 18px */
  h3 {font-size:1.25em}  /* displayed at 15px */
  h4 {font-size:1em}  /* displayed at 12px */
  /* strong em */
  strong { font-weight: bolder; }
  em { font-style: italic; }
  /* tables & forms */
  input, select, th, td {font-size:1em}
  /* classes */  
  .error { color: red; }  
  /* page structure & layout */  
  #page {
  background: #f8fdfe;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  margin: 0 auto;
  text-align: left;
  width: 760px;
  }
  #header { 
  background: #012345;
  border-bottom: 3px solid #3C6787;
  height: 118px;
  position: relative;
  }
  #nav {
  bottom: 0;
  font-size: 1.1em;
  position: absolute;
  right: 25px; 
  }
  #breadcrumb {
  background: #87BCD8;
  border-bottom: 2px solid #90C7E4;
  color: #4C7897;
  font-size: 1.2em;
  height: 46px;
  position: relative;
  }
  #info {
  background: #76AAC9; 
  border-bottom: 3px solid #93CCEA;
  color: #E4EEF4; 
  font-size: 1.2em;
  line-height: 2.0em; 
  position: relative;
  padding: 20px 230px 20px 30px;
  }
  #content {
  float: left;
  font-size: 1.2em;
  line-height: 1.5em;
  padding: 30px 20px 30px 30px;
  width: 448px;
  }
  #sidebar {
  color: #4B798B;
  float: right;
  font-size: 1.1em;
  line-height: 1.4em;
  padding: 10px 30px 20px 20px;
  width: 206px;
  }
  #footer {
  border-top: 1px solid #DBDFE0;
  clear: both;
  color: #aaa;
  font-size: 1.1em;
  height: 70px;
  }  
  /* header */  
  #header h1 {
  font-size: 4.0em;
  position: absolute;
  margin: 30px 0 0 45px;
  }
  #header h1 a {
  color: #9ca9b7;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: normal;
  letter-spacing: -1px;
  text-decoration: none;
  }
  #header h1 a:hover {color: #fff;}
  #header h1 span {
  color: #fff;
  font-size: 18px;
  }  
  /* navigation */  
  #nav ul {
  display: inline;
  }
  #nav li {
  display: block;
  float: left;
  list-style: none;
  }
  #nav li a {
  background: #234466;
  color: #fff;
  display: block;
  margin: 0 1px 0 1px;
  line-height: 1.6em;
  padding: 7px 20px 7px 20px;
  text-align: center;
  text-decoration: none;
  }
  #nav li a:hover,
  #nav li a.current { background: #3C6787; }  
  /* breadcrumb */  
  #breadcrumb a {
  color: #4c7897;
  text-decoration: none;
  }  
  /* info */  
  #info a {
  color: #E4EEF4;
  }  
  /* content */  
  #content h2 {
  color: #76aac9;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 22px;
  font-weight: normal;
  letter-spacing: -1px;
  padding: 0 0 17px 0;
  }
  #content h2 a {
  color: #76aac9;
  text-decoration: none;
  }
  #content h2 a:hover {
  color: #7C90A1;
  }
  #content h3, #content h4 {
  background: none;
  border-bottom: 1px solid #dfe3e4;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 5px;
  }
  #content p {
  line-height: 1.5em;
  margin: 0 0 20px 0;
  }
  #content ol {
  line-height: 1.8em;
  margin: 0 30px 20px 50px;
  }
  #content ul {
  line-height: 1.8em;
  margin: 0 30px 20px 30px;
  }
  #content ul li {
  line-height: 1.8em;
  list-style: square;
  padding-left: 2px;
  }  
  /* secondary content */  
  #sidebar h2, #sidebar h3 {
  color: #444;
  font-size: 1.5em;
  font-weight: normal;
  margin: 20px 0 5px 0;
  padding: 7px 0 7px 0;
  }
  #sidebar p { margin: 0; }  
  /* footer */  
  #footer p {
  line-height: 1.5em;
  margin-top: 15px;
  text-align: center;
  }
  #footer a {
  color: #aaa;
  text-decoration: underline;
  }  
  /* misc */  
  a img { border: none; }
  acronym { cursor: help; }
  blockquote {
  background: url(quote.gif) no-repeat 10px 0;
  color: #76aac9;
  border-left: 2px solid #76aac9;
  line-height: 1.5em;
  margin: 0 10px 20px 10px; 
  padding: 0 10px 0 10px;
  }
  hr, .hide { display: none; }
  .show { display: inline; }  
  pre, code { font-size: 1.1em; line-height: normal; background: #eee; color: #444; }  
  /* classes */  
  .right, .left {
  background: #fff;
  border: 1px solid #e3e7e8;
  float: left;
  margin: .5em 12px 6px 0;
  padding: 6px;
  }
  .right {
  float: right;
  margin: .5em 0  6px 12px;
  }
  .left {
  float: left;
  margin: .5em 12px 6px 0;
  }  
  /* comment */
  .comment-form-body {
  width: 450px;
  }  
  
  /*Credits: Dynamic Drive CSS Library */
  /*URL: http://www.dynamicdrive.com/style/ */  
  
  .suckerdiv ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 160px; /* Width of Menu Items */
  border-bottom: 1px solid #012345;
  }
  
  .suckerdiv ul li{
  position: relative;
  }
  
  /*Sub level menu items */
  .suckerdiv ul li ul{
  position: absolute;
  width: 160px; /*sub menu width*/
  top: 0;
  visibility: hidden;
  }  
  /* Sub level menu links style */
  .suckerdiv ul li a{
  display: block;
  overflow: auto; /*force hasLayout in IE7 */
  color: black;
  text-decoration: none;
  background-color: #bdd7e6;
  padding: 1px 5px;
  border: 1px solid #012345;
  border-bottom: 0;
  }  
  .suckerdiv ul li a:visited{
  color: black;
  }  
  .suckerdiv ul li a:hover{
  background-color: #3c6787;
  color: #ffffff;
  }  
  .suckerdiv .subfolderstyle{
  background: #bdd7e6 url(media/arrow-list.gif) no-repeat center right;
  }  
   
  /* Holly Hack for IE \*/
  * html .suckerdiv ul li { float: left; height: 1%; }
  * html .suckerdiv ul li a { height: 1%; }
  /* End */  
  </style>  
  <script type="text/javascript">  
  //SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
  //By Dynamic Drive: http://www.dynamicdrive.com/style/  
  var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas  
  function buildsubmenus(){
  for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  for (var t=0; t<ultags.length; t++){
  ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
  ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
  ultags[t].parentNode.onmouseover=function(){
  this.getElementsByTagName("ul")[0].style.display="block"
  }
  ultags[t].parentNode.onmouseout=function(){
  this.getElementsByTagName("ul")[0].style.display="none"
  }
  }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
  }  
  if (window.addEventListener)
  window.addEventListener("load", buildsubmenus, false)
  else if (window.attachEvent)
  window.attachEvent("onload", buildsubmenus)  
  </script>  
  </head>
  <body>
  <div id="page">
  <?php $this->includeSnippet('header'); ?>
  <div id="content">  
   <h2><?php echo $this->title(); ?></h2>
  <?php echo $this->content(); ?> 
  <?php if ($this->hasContent('extended')) echo $this->content('extended'); ?>   
  </div> <!-- end #content -->
  <div id="sidebar">  
   <?php echo $this->content('sidebar', true); ?>   
  </div> <!-- end #sidebar -->
  <?php $this->includeSnippet('footer'); ?>
  </div> <!-- end #page -->
  </body>
  </html>

Dynamic Drive CSS Library Usage Terms

The CSS codes offered in Dynamic Drive CSS Library are free for use on both personal and commercial sites. However, the following usage terms exist, and must be understood/ abided by first:

  1. Users may use any CSS code offered for download on Dynamic Drive's CSS Library, free of charge, on both personal and commercial web sites. This includes web designers who wish to use our CSS codes in their paid web site projects.
  2. Users may NOT, however, redistribute or repost/ resell for download any CSS code (including any graphics) found in the CSS library. Redistribution is defined as re-offering our codes for download in any fashion, whether on a competing web site, an application that generates code snippets, or a CD-ROM collection of CSS/JavaScript codes etc. Some examples of what is acceptable and what is not are:
    • Acceptable:
      -Use our CSS codes on any personal or commercial web site to aid in its appearance/ usability.
      -As a web designer, use our CSS codes in your paid projects for your client web sites.
      -As a software developer, use our CSS codes within a application/ program as part of its interface, such as a CSS menu being used as the program's navigation interface. The program itself can be distributable.
    • Not Acceptable:
      -Put our CSS codes (including graphics) on another webmaster type site for others to download.
      -Use our CSS codes in any type of service or application whereby our codes are part of the product offerings themselves.
      -Put our CSS code in any other types of medium for redistribution, such as a CD-ROM that consists of, but not limited to, webmaster codes and web graphics.
  3. Users agree not to remove/ edit the credit notice within the CSS source code, or claim the code to be work of their own.
  4. Users are not required to link back to Dynamic Drive CSS library to use our CSS codes, as much as they are appreciated. :)
  5. Users agree not to hold Dynamic Drive liable for any damages resulted from proper or improper use of any of the CSS codes found in the CSS Library. Use at your own risk.

By using any code offered in our CSS Library, it is understood you have read and agreed to the above usage terms.

Commentaires

0 comments