HTML voor de navigatie

De HTML voor de navigatie bestaat uit ul's. Ik laat drie verschillende mogelijkheden zien, dus in de hoofd ul heb ik drie li's:

  <ul id="mainnav">
      <li class="side"><a href="#">Drie sub-blokken naast elkaar</a><ul>
          <li><h2>Lorem ipsum</h2><ul>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
              <li><a href="#">Lorem ipsum</a></li>
            </ul></li>
          <li><h2>Dolor sit amet</h2><ul>
              <li><a href="#">Dolor sit amet</a></li>
              <li><a href="#">Dolor sit amet</a></li>
              <li><a href="#">Dolor sit amet</a></li>
            </ul></li>
          <li><h2>Dolor sit amet</h2><ul>
              <li><a href="#">Dolor sit amet</a></li>
              <li><a href="#">Dolor sit amet</a></li>
              <li><a href="#">Dolor sit amet</a></li>
            </ul></li>
        </ul></li>
        
      <li><a href="#">Gewone dropdown</a><ul>
            <li><a href="#">Dolor sit amet</a></li>
          <li><a href="#">Dolor sit amet</a></li>
          <li><a href="#">Dolor sit amet</a></li>
        </ul></li>
        
      <li class="img"><a href="#">Afbeelding naast item</a><ul>
            <li class="afb1"><a href="#">Dolor sit amet <span class="description">consectetur adipiscing elit</span></a></li>
          <li class="afb2"><a href="#">Dolor sit amet <span class="description">consectetur adipiscing elit</span></a></li>
          <li class="afb3"><a href="#">Dolor sit amet <span class="description">consectetur adipiscing elit</span></a></li>
        </ul></li>
    </ul>

Stijling

Ik heb de stijling simpel gehouden. De hoofd-navigatie heeft een lichtgrijze achtergrond en de letters zijn midden-grijs. De stijling van de sub-items kun je uiteraard ook naar hartelust veranderen.

/* dropdown 2.0 */
ul#mainnav { width:100%; float:left; background-color:#eee; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
ul#mainnav li { display:block; float:left; position:relative; height:40px; padding:0 10px; line-height:40px; }
ul#mainnav li:hover { background:url('arrow-top.png') 10px 30px no-repeat; }
ul#mainnav li a { color:#bbb; font-weight:bold; }
/* subitems - default */
ul#mainnav li ul { display:none; position:absolute; top:35px; left:0; width:175px; background-color:#fff; border:1px solid #bbb; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; -moz-box-shadow: 0 0 .5em #bbb; -webkit-box-shadow: 0 0 .5em #bbb; box-shadow: 0 0 .5em #bbb; /* >= IE8 */ }
ul#mainnav li:hover ul { display:block; }
ul#mainnav li ul li { width:100%; padding:5px; line-height:normal; height:auto; }
ul#mainnav li ul li a { display:block; }
ul#mainnav li ul li a:hover { text-decoration:underline; }
ul#mainnav li ul li ul { border:0; position:inherit; top:0; box-shadow:0 0 0; -moz-box-shadow:0 0 0; -webkit-box-shadow:0 0 0; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; }

/* subitems - side */
ul#mainnav li.side ul { width:450px; float:left; }
ul#mainnav li.side ul li { width:130px; padding:10px; }
ul#mainnav li.side ul li h2 { border:1px solid #09f; background-color: #9cf; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:5px; color:#fff }
ul#mainnav li.side ul li ul { border:0; width:auto; padding:5px 0 0; }
ul#mainnav li.side ul li ul li { padding:5px; list-style:disc; list-style-type:disc; list-style-position:inside; width:100%; background:none; }
ul#mainnav li.side ul li ul li a { color:#bbb; }
ul#mainnav li.side ul li ul li a:hover { color:#09f }

/* subitems - img */
ul#mainnav li.img {}
ul#mainnav li.img ul { width:200px; }
ul#mainnav li.img ul li { background:url('arrows_white-border.png') no-repeat; height:40px; width:149px; padding:7px 5px 3px 50px; }
ul#mainnav li.img ul li.afb1 { background-position:0 0; }
ul#mainnav li.img ul li.afb2 { background-position:0 -92px; }
ul#mainnav li.img ul li.afb3 { background-position:0 -184px; }
ul#mainnav li.img ul li a {  }
ul#mainnav li.img ul li a:hover { color:#999; text-decoration:none; }
ul#mainnav li.img ul li span.description { width:100%; display:block; font-weight:normal; font-size:90%; }

Online demo

De online demo van deze tutorial vind je hier.

Als eerste moet je bedenken hoe je de bezoeker wilt laten zien dat ze een Quick Preview van het product kunnen openen. Ik gebruik er een afbeelding voor met de tekst ‘QUICKVIEW >’.

HTML

Zoals je kunt zien in bovenstaande afbeelding gebruik ik de IKEA producten weergave weer, hier zal ik niet weer alle HTML voor laten zien.

    <li class="product">
          <div id="quickviewID1" class="qv"><div class="quickview">
              <div class="alignleft">
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                    <img src="stoel.jpg" width="200" alt="Stoel" />
                </div>
                <div class="alignright">
                  <h2 class="prod-title">Stoel</h2>
                    <p class="prod-desc">Een bruin leren stoel</p>
                    <p class="prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus arcu eget velit varius vitae luctus felis consectetur. Nullam at sapien id felis bibendum consectetur. Donec sodales nibh dui. Maecenas pharetra varius mi, at porttitor nunc mattis ac. Donec sagittis adipiscing dolor vel vestibulum. Nam facilisis, tellus vitae cursus porta, elit lectus congue turpis, vel rutrum sem mauris sit amet orci. Fusce varius dictum fringilla. Sed et quam tellus. Aliquam erat volutpat. Nulla ac interdum lectus. Cras eu nisl ut augue laoreet posuere. Pellentesque mi ante, elementum quis ultrices nec, vestibulum nec magna. Nullam est metus, semper ac elementum quis, imperdiet ac tellus. Duis tincidunt mollis pulvinar. Donec felis risus, lacinia lobortis elementum vel, commodo ac lectus.</p>
                    <p class="prod-price">&euro; 250,-</p>
                    <hr />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div></div>
            
            <div class="info">
                <div class="prod-info">
                    <a href="#quickviewID1" title="Stoel" rel="shadowbox;height=400;width=600" class="quickview"><img src="quickview.png" class="quickview" width="100" height="40" alt="Quickview" /></a>
                    <img src="stoel.jpg" class="prod" width="100" alt="Stoel" />
                    <h2 class="prod-title">Stoel</h2>
                    <p class="prod-desc">Een bruin leren stoel</p>
                    <p class="prod-price">&euro; 250,-</p>
                    
                    <div class="prod-more-info">
                        <hr />
                        <h3>Extra informatie</h3>
                        <p>Lorem ipsum dolor sit amet.</p>
                        <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                    </div>
                </div>
      </div>
        </li>

De HTML hierboven is voor 1 product, de weergave in het overzicht en wat er in de Quick Preview weergegeven moet worden.

De HTML voor de Quick Preview geïsoleerd:

            <div id="quickviewID1" class="qv"><div class="quickview">
              <div class="alignleft">
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                  <img src="stoel.jpg" width="200" alt="Stoel" />
                    <img src="stoel.jpg" width="200" alt="Stoel" />
                </div>
                <div class="alignright">
                  <h2 class="prod-title">Stoel</h2>
                    <p class="prod-desc">Een bruin leren stoel</p>
                    <p class="prod-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rhoncus arcu eget velit varius vitae luctus felis consectetur. Nullam at sapien id felis bibendum consectetur. Donec sodales nibh dui. Maecenas pharetra varius mi, at porttitor nunc mattis ac. Donec sagittis adipiscing dolor vel vestibulum. Nam facilisis, tellus vitae cursus porta, elit lectus congue turpis, vel rutrum sem mauris sit amet orci. Fusce varius dictum fringilla. Sed et quam tellus. Aliquam erat volutpat. Nulla ac interdum lectus. Cras eu nisl ut augue laoreet posuere. Pellentesque mi ante, elementum quis ultrices nec, vestibulum nec magna. Nullam est metus, semper ac elementum quis, imperdiet ac tellus. Duis tincidunt mollis pulvinar. Donec felis risus, lacinia lobortis elementum vel, commodo ac lectus.</p>
                    <p class="prod-price">&euro; 250,-</p>
                    <hr />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div></div>

De #quickviewID1 (id) moet voor elk product anders zijn, omdat je anders continue dezelfde Quick Preview opent (nou is dat in mijn voorbeeld niet zo erg, omdat hetzelfde product herhaald wordt, maar in een live website is dit niet wenselijk). Vergeet dus niet de ID van de div te veranderen, maar ook niet in de href van de link voor de Lightbox variant:

<a href="#quickviewID1" title="Stoel" rel="shadowbox;height=400;width=600" class="quickview"><img src="quickview.png" class="quickview" width="100" height="40" alt="Quickview" /></a>

CSS

Om de inhoud in Shadowbox te laten zien zoals je wil moet je CSS gebruiken, in mijn voorbeeld is dat de volgende CSS:

/* quick view */
div.qv, div.quickview { display:none; }
#sb-body div.quickview { padding:20px; width:540px; display:block; }

#sb-body, #sb-loading { background-color:#fff; }
#sb-body .alignleft { width:200px; display:block; float:left; }
#sb-body .alignright { width:260px; display:block; float:right; }

#sb-body h2 { text-transform: uppercase; margin: 0 0 .5em; padding: .5em 0; font-size: 1.4em; }
#sb-body h3 { font-size: 1.2em; margin: 0 0 .5em; padding: .5em 0 0; }
#sb-body p { font-size:1.2em; line-height:1.5em; margin:0 0 1em; }
#sb-body p.prod-price { font-weight: bold; font-size: 1.6em; line-height: 1.8em; }
#sb-body a { text-decoration: none; color: darkturquoise; }

Online demo

Ook van deze tutorial is weer een online demo te bekijken

Basis HTML

  <ul id="products">
  
    <li class="product"><div class="info">
      <div class="prod-info">
        <img src="stoel.jpg" width="100" alt="Stoel" />
        <h2 class="prod-title">Stoel</h2>
        <p class="prod-desc">Een bruin leren stoel</p>
        <p class="prod-price">&euro; 250,-</p>
        
        <div class="prod-more-info">
          <hr noshade="noshade" />
          <h3>Extra informatie</h3>
          <p>Lorem ipsum dolor sit amet.</p>
          <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
        </div>
      </div>
    </div></li>
    
  </ul>

In mijn vorige post hierover gebruikte ik hetzelfde product 5 keer, omdat we nu een dynamisch aantal producten hebben – en het willen integreren in Shopp – hebben we de HTML voor een product maar 1 keer nodig.

Shopp integratie

Deze tutorial is voor Shopp 1.1!

Als eerste is het belangrijk dat je Custom Templates hebt geactiveerd in je Shopp installatie (Shopp -> Settings -> Presentation). Pak daarna de category.php (in de shopp-map in de map van je theme).

De code

<?php if(shopp('category','hasproducts','load=prices,images')): ?>
  <h1><?php shopp('category','name'); ?></h1>
  
  <ul class="products">
    <li class="row"><ul>
    <?php while(shopp('category','products')): ?>
    <?php if(shopp('category','row')): ?></ul></li><li class="row"><ul><?php endif; ?>
    
      <li class="product"><div class="info">
        <div class="prod-info">
          <?php shopp('product','coverimage','height=75&fit=height'); ?>
          <h2 class="prod-title"><?php shopp('product','name'); ?></h2>
          <p class="prod-desc"><?php shopp('product','summary'); ?></p>
          <p class="prod-price"><?php shopp('product','saleprice','starting=Vanaf'); ?></p>
          
          <div class="prod-more-info">
            <hr noshade="noshade" />
            <?php if (shopp('product','has-savings')): ?>
              <p class="savings"><?php _e('Bespaar','Shopp'); ?> <?php shopp('product','savings','show=percent'); ?></p>
            <?php endif; ?>
            
            <?php if(shopp('product','has-specs')): ?>
            <h3>Specificaties</h3>
            <dl class="details">
              <?php while(shopp('product','specs')): ?>
              <dt><?php shopp('product','spec','name'); ?>:</dt><dd><?php shopp('product','spec','content'); ?></dd>
              <?php endwhile; ?>
            </dl>
            <?php endif; ?>
            
            <p><a href="<?php shopp('product','url'); ?>" class="prod-link" title="<?php shopp('product','name'); ?> bekijken">Product bekijken &raquo;</a></p>
          </div>
        </div>
      </div></li>
      
    <?php endwhile; ?>
    </ul></li>
  </ul>
  
  <div class="alignright"><?php shopp('category','pagination'); ?></div>
  
<?php else: ?>
  <?php if (!shopp('catalog','is-landing')): ?>
    <h1><?php shopp('category','name'); ?></h1>
    <p><?php _e('Er zijn geen producten gevonden.','Shopp'); ?></p>
  <?php endif; ?>
<?php endif; ?>

Eigenlijk alle code is hetzelfde als in vorige versies, maar een klein stukje niet: coverimage. Dit is de nieuwe code voor de thumbnail van het product en die heeft ook nieuwe mogelijkheden.

<?php shopp('product','coverimage','height=75&fit=height'); ?>

De opties die ik heb opgegeven in deze tag betekenen dat de afbeelding 75pixels hoog wordt en dat de hoogte moet passen (breedte is dus variabel).

Stijling

Voor de stijling kun je gebruik maken van de CSS die ik heb opgegeven in de originele tutorial. Daarnaast kun je gebruik maken van de stijling van Shopp (in shopp.css, ook in de shopp-map van je theme).

Grid view

Als eerste hebben we een standaard grid view, gevuld met producten, nodig voor de product-overzicht pagina.

<ul id="products">
        <li class="product"><div class="info">
            <div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
                <h2 class="prod-title">Stoel</h2>
                <p class="prod-desc">Een bruin leren stoel</p>
                <p class="prod-price">&euro; 250,-</p>
 
                <div class="prod-more-info">
                    <hr noshade="noshade" />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div>
        </div></li>
 
        <li class="product"><div class="info">
            <div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
                <h2 class="prod-title">Stoel</h2>
                <p class="prod-desc">Een bruin leren stoel</p>
                <p class="prod-price">&euro; 250,-</p>
 
                <div class="prod-more-info">
                    <hr noshade="noshade" />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div>
        </div></li>
 
        <li class="product"><div class="info">
            <div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
                <h2 class="prod-title">Stoel</h2>
                <p class="prod-desc">Een bruin leren stoel</p>
                <p class="prod-price">&euro; 250,-</p>
 
                <div class="prod-more-info">
                    <hr noshade="noshade" />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div>
        </div></li>
 
        <li class="product"><div class="info">
            <div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
                <h2 class="prod-title">Stoel</h2>
                <p class="prod-desc">Een bruin leren stoel</p>
                <p class="prod-price">&euro; 250,-</p>
 
                <div class="prod-more-info">
                    <hr noshade="noshade" />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div>
        </div></li>
 
        <li class="product last"><div class="info">
            <div class="prod-info">
                <img src="stoel.jpg" width="100" alt="Stoel" />
                <h2 class="prod-title">Stoel</h2>
                <p class="prod-desc">Een bruin leren stoel</p>
                <p class="prod-price">&euro; 250,-</p>
 
                <div class="prod-more-info">
                    <hr noshade="noshade" />
                    <h3>Extra informatie</h3>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p><a href="#product" class="prod-link">Product bekijken &raquo;</a></p>
                </div>
            </div>
        </div></li>
 
    </ul>

Voor het gemak heb ik vijf keer hetzelfde product gebruikt (het wordt dus een grid-view met 5 producten op een rij).
Het laatste product heeft niet alleen de class product (de li), maar ook de class last.

Opmaak

Om het geheel te laten werken hebben we ook stijling nodig. Er komt dus geheel geen JavaScript aan te pas!

ul#products
{
  margin:0 0 2em;
}

ul#products li.product
{
  width:19.8%;
  height:200px;
  display:inline;
  float:left;
  border-right:1px solid #eee;
  position:relative;
  background:#fff;
  margin:0 0 2em;
}

ul#products li.product:hover
{
  border-right-color:#fff;
  z-index:9;
}

ul#products li.product .info
{
  display:block;
  background:#fff;
}

ul#products li.product .prod-info
{
  padding:1.1em;
}

ul#products li.product .info:hover .prod-info
{
  -moz-box-shadow:0 0 .5em #888;
  -webkit-box-shadow:0 0 .5em #888;
  box-shadow:0 0 .5em #888;
  filter:progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true);/* <= IE7 */
  -ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
    progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true)"; /* >= IE8 */
  padding:1em;
  border:1px solid #eee;
}

ul#products li.product img
{
  margin:0 auto 5px;
  display:block;
}

ul#products li.product h2
{
  text-transform:uppercase;
  margin:0 0 .5em;
  padding:.5em 0;
  font-size:1.4em;
}

ul#products li.product p
{
  font-size:1.2em;
  margin:0 0 .5em;
  line-height:1.4em;
}

ul#products li.product p.prod-price
{
  font-weight:bold;
  font-size:1.6em;
  line-height:1.8em;
}

ul#products li.last
{
  border:none;
}

ul#products li.product a.prod-link
{
  text-decoration:none;
  color:darkturquoise;
}

ul#products li.product .prod-more-info
{
  display:none;
}

ul#products li.product .info:hover .prod-more-info
{
  display:block;
  width:100%;
}

De z-index:9; op ul#products li.product:hover zorgt ervoor dat de li boven andere elementen gezet wordt. Werkt deze niet bij jou? Dan kan het zijn dat het element (waar deze overheen moet gaan) een hogere z-index heeft. Je kunt de z-index zo hoog maken als je zelf wil (hou wel rekening met evt. Lightbox varianten, zij gebruiken ook een z-index om boven alle elementen te komen).

CSS3

Voor de schaduw maak ik gebruik van CSS3 in plaats van afbeeldingen:

-moz-box-shadow:0 0 .5em #888;
-webkit-box-shadow:0 0 .5em #888;
box-shadow:0 0 .5em #888;

In Internet Explorer wordt CSS3 (nog) niet ondersteund. IE heeft wel filters die eenzelfde resultaat geven (maar deze komen niet door de W3C validatie heen):

filter:progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true);/* <= IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropShadow(color=#969696, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#C2C2C2, offx=1, offy=1, positive=true)
  progid:DXImageTransform.Microsoft.dropShadow(color=#EFEFEF, offx=1, offy=1, positive=true)"; /* >= IE8 */

Online demo

Natuurlijk heb ik ook een demo online gezet: IKEA product (grid view) nabootsing.

HTML & PHP

<div id="image">

            <script type="text/javascript">
      jQuery(function() {
        jQuery("#image .rposts").jCarouselLite({
          btnNext: "#buttons .alignright",
          btnPrev: "#buttons .alignleft",
          speed: 800,
          visible: 5
        });
      });
      </script>
<div id="buttons">
<div class="alignleft"><a href="#vorige" onclick="return false;"><em>&laquo; vorige</em></a></div>
<div class="alignright"><a href="#volgende" onclick="return false;"><em>volgende &raquo;</em></a></div>
</div>
<div class="rposts">
<ul class="recentposts"><?php
        $curpage = $post;
              $recentposts = get_posts('numberposts=10&orderby=date&order=DESC');
        foreach ($recentposts as $post): setup_postdata($post);

              if(function_exists('wct_display_thumb'))
        {
          if(wct_display_thumb() != '')
          {
            ?>
<li <?php echo ( $curpage->ID == get_the_ID() && !is_home() ) ? ' class="current"' : ''; ?>><a href="<?php the_permalink(); ?>" title="<?php the_title(''); ?>">
              <?php echo wct_display_thumb(); ?>
<div class="item">
                              <span class="title"><strong><?php the_title(''); ?></strong></span>
                                <span><strong>Gepost op:</strong> <?php the_time('j M.');?></span>
                                <span class="comments"><?php $comments = get_comments('post_id='.get_the_ID()); $comments = count($comments); echo ( $comments == 1 ) ? $comments.' reactie' : $comments.' reacties'; ?></span>
                            </div>

                        </a></li>

<?php
          } // endif
        } // endif
      ?>

            <?php endforeach; rewind_posts(); $post = $curpage; ?></ul>
</div>
</div>

De code die je hierboven ziet is gekopieerd uit mijn theme en dus precies wat ik ook gebruik.

Voor de carousel gebruik ik jCarouselLite, als je het carousel effect ook wilt gebruiken (en de jQuery niet aan wilt passen) zul je deze dus ook moeten downloaden.

Uitleg code

Zoals je ziet gebruik ik de WP-Choose-Thumb plugin voor de post-thumbnails. De plugin pas ik elke update aan zodat de afbeelding niet meteen ge-echo’d wordt, dit om te kunnen checken of de post een thumbnail heeft of niet:

<?php if(wct_display_thumb() != '') ?>

Deze code zorgt ervoor dat als de functie wct_display_thumb geen waarde heeft, de post ook niet wordt weergegeven. Maar, nogmaals, hiervoor heb ik de WP-Choose-Thumb plugin dus voor aangepast, standaard geeft de wct_display_thumb meteen de afbeelding terug.

<li <?php echo ( $curpage->ID == get_the_ID() && !is_home() ) ? ' class="current"' : ''; ?>

Bovenstaande code zorgt ervoor dat de li (waar de image en info v/d post in staat) de class current krijgt als je die post op dat moment aan het bekijken bent.

<span class="comments"><?php $comments = get_comments('post_id='.get_the_ID()); $comments = count($comments); echo ( $comments == 1 ) ? $comments.' reactie' : $comments.' reacties'; ?>

Dit stukje code zorgt ervoor dat het juiste woord bij het aantal reacties wordt weergegeven (dat er dus niet iets als ’1 reacties’ of ’10 reactie’ komt te staan).

CSS

Met alleen bovenstaande code ben je er natuurlijk nog niet, de weergave van de header lijkt namelijk totaal nog niet op dat wat ik op mijn blog heb.

#header #image ul,
#header #image ul li { width:960px; height:200px; display:block; float:left; }
#header #image ul li { overflow:hidden; text-align:center; }
#header #image #buttons { z-index:9; }
#header #image #buttons .alignleft,
#header #image #buttons .alignright { position:absolute; top:85px; z-index:8!important; }
#header #image #buttons .alignleft { left:-23px; }
#header #image #buttons .alignright { right:-27px; }
#header #image #buttons .alignleft a,
#header #image #buttons .alignright a { width:46px; height:46px; display:block; float:left; }
#header #image #buttons .alignleft a { background:url('../img/arrows_white-border.png') 0 -46px no-repeat; }
#header #image #buttons .alignleft a:hover { background-position:0 -138px; }
#header #image #buttons .alignleft a:active { background-position:0 -230px; }
#header #image #buttons .alignright a { background:url('../img/arrows_white-border.png') 0 0 no-repeat; }
#header #image #buttons .alignright a:hover { background-position:0 -92px; }
#header #image #buttons .alignright a:active { background-position:0 -184px; }
#header #image #buttons a:hover { text-decoration:none; }
#header #image #buttons .alignleft a em,
#header #image #buttons .alignright a em { display:block; font-size:0; color:#fff; }

#header #image ul.recentposts { width:960px; height:200px; overflow:hidden; display:block; float:left; padding:20px 0 0!important; background:transparent; border:0; position:absolute; top:0; left:0; z-index:2!important; }
#header #image ul.recentposts li { width:192px; display:inline; display:block; float:left; text-align:center; font-size:.8em; }
#header #image ul.recentposts li a { position:relative; width:156px; height:156px; display:block; margin:0 18px; background-color:#fff; text-decoration:none; }
#header #image ul.recentposts li a img { border:4px solid #ddd; padding:1px; }
#header #image ul.recentposts li.current a img,
#header #image ul.recentposts li a:hover img { border-color:#f06; }
#header #image ul.recentposts li a .item { position:absolute; display:none; top:5px; left:5px; z-index:2; width:150px; height:150px; background-color:#333; color:#fff; opacity:.85; -moz-opacity:.85; filter:alpha(85); }
#header #image ul.recentposts li a .item span { padding:0 10px; margin:0 0 10px; font-size:.8em; display:block; width:130px; clear:both; }
#header #image ul.recentposts li a .item span.title { font-size:.9em; padding:10px; }
#header #image ul.recentposts li a .item span.comments { position:absolute; left:0; bottom:0; margin:0; width:130px; padding:5px 10px; display:block; background-color:#f06; color:#fff; font-size:.9em; font-weight:bold; border-top:1px solid #fff; }
#header #image ul.recentposts li a:hover .item { display:block; }

Ik heb mijn div id=image in een div id=header staan. Je bent natuurlijk vrij om dit anders te doen, vergeet dan niet de CSS ook aan te passen.

In de afbeelding hierboven lijkt het misschien 1 achtergrond, maar het zijn er echt twee. Dat kun je in het online voorbeeld zien, als je de pagina scrollt zul je namelijk zien dat de afbeelding in de rondjes verandert.

De CSS

html, body { margin:0; padding:0; height:auto; min-height:100%; _height:100%; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; }
html { background: url('pattern.gif') 0 0; }
body { background: url('body-bg.png') 0 0 fixed; font-size:.8em; clear:both; }

Zoals je in de CSS kunt zien geef je de html & body een hoogte van 100%. Dit is belangrijk voor als de content niet genoeg is om het scherm te vullen. Anders krijg je onderin een stuk ‘leeg’.

Dan zie je hoe een achtergrond aan de html & body wordt toegevoegd. Zorg er wel voor dat de achtergrond voor de body groot genoeg is voor grote beeldschermen (bij dit voorbeeld zul je de rondjes aan de rechterkant nog eens zien op een 24″ beeldscherm bijvoorbeeld).
De body heeft een bgproperty fixed, hierdoor blijft de grijze achtergrond op z’n plaats en zie je de html achtergrond er doorheen bewegen.

HTML voor de navigatie

  <ul id="navigatie">
      <li><a href="#pagina">Geen subpagina's</a></li>
      <li><a href="#pagina">Twee niveau's</a><ul>
        <li><a href="#pagina">Pagina</a></li>
        <li><a href="#pagina">Pagina</a></li>
        <li><a href="#pagina">Pagina</a></li>
    </ul></li>
      <li><a href="#pagina">Drie niveau's</a><ul>
        <li><a href="#pagina">Pagina</a></li>
        <li><a href="#pagina">Heeft submenu</a><ul>
        <li><a href="#pagina">Pagina</a></li>
          <li><a href="#pagina">Pagina</a></li>
          <li><a href="#pagina">Pagina</a></li>
      </ul></li>
        <li><a href="#pagina">Pagina</a></li>
    </ul></li>
      <li><a href="#pagina">Vier niveau's</a><ul>
        <li><a href="#pagina">Pagina</a></li>
        <li><a href="#pagina">Heeft submenu</a><ul>
          <li><a href="#pagina">Pagina</a></li>
          <li><a href="#pagina">Heeft submenu</a><ul>
            <li><a href="#pagina">Pagina</a></li>
            <li><a href="#pagina">Pagina</a></li>
            <li><a href="#pagina">Pagina</a></li>
        </ul></li>
          <li><a href="#pagina">Pagina</a></li>
      </ul></li>
        <li><a href="#pagina">Pagina</a></li>
    </ul></li>
  </ul>

Het resultaat dat je hebt met bovenstaande HTML is het volgende:

CSS

Met alleen de HTML ziet de navigatie er nog ongelooflijk kaal uit natuurlijk. De CSS voor alle vier de niveau’s:

/* navigatie - niveau 1 */
ul#navigatie { width:740px; height:40px; display:block; float:left; background:#bbb url('bg.gif') 0 0 repeat-x; }
ul#navigatie li { position:relative; height:40px; display:block; float:left; }
ul#navigatie li a { font-weight:bold; color:#fff; padding:12px 10px; display:block; }
ul#navigatie li:hover a,
ul#navigatie li a:hover { background:#bbb url('bg.gif') 0 -40px repeat-x; }
/* navigatie - niveau 2 */
ul#navigatie li ul { position:absolute; top:40px; display:none; width:175px; z-index:2; }
ul#navigatie li:hover ul { display:block; }
ul#navigatie li ul li { clear:both; height:auto; width:100%; }
ul#navigatie li:hover ul li a,
ul#navigatie li ul li a { background:#efefef none; padding:10px; width:155px; display:block; color:#bbb; font-weight:normal; }
ul#navigatie li ul li:hover a,
ul#navigatie li ul li a:hover { background:#bbb none; color:#fff; font-style:italic; }
/* navigatie - niveau 3 */
ul#navigatie li:hover ul li ul,
ul#navigatie li ul li ul { position:absolute; top:0; left:175px; display:none; background:#090 none; z-index:3; }
ul#navigatie li ul li:hover ul { display:block; }
ul#navigatie li ul li ul li { }
ul#navigatie li ul li:hover ul li a,
ul#navigatie li ul li ul li a { font-style:normal; }
ul#navigatie li ul li ul li:hover a,
ul#navigatie li ul li ul li a:hover { background:#efefef none; color:#bbb; font-style:italic; }
/* navigatie - niveau 4 */
ul#navigatie li:hover ul li ul li ul,
ul#navigatie li ul li ul li ul { position:absolute; top:0; left:175px; display:none; background:#090 none; z-index:3; }
ul#navigatie li ul li ul li:hover ul { display:block; }
ul#navigatie li ul li ul li ul li { }
ul#navigatie li ul li ul li:hover ul li a,
ul#navigatie li ul li ul li ul li a { font-style:normal; }
ul#navigatie li ul li ul li ul li:hover a,
ul#navigatie li ul li ul li ul li a:hover { background:#bbb none; color:#fff; }

Inclusief de CSS ziet het menu er zo uit: demo CSS dropdown navigatie (opent in dit venster).

IE6 ondersteuning

IE6 ondersteund geen :hover op andere elementen dan a, het dropdown menu zal in IE6 dus niet werken.

Hoewel de code er misschien wel op lijkt, met background:#fff url('http://url.nl/naar/afbeelding.jpg') 100% 100% helpt je hier niet mee. Dit is namelijk precies hetzelfde als background:#fff url('http://url.nl/naar/afbeelding.jpg') rechts onder en geeft dus niet de grootte van de afbeelding weer.

Als voorbeeld ga ik deze afbeelding gebruiken (zie links). Als je op de afbeelding klikt zul je zien dat ‘ie niet mega-groot is (800×600 pixels om precies te zijn).
Ja, de afbeelding wordt dan wel behoorlijk uitgerekt op grotere beeldschermen, maar het geeft dan wel goed weer wat er nu precies gebeurd

Als eerste maken we de HTML aan, zet het volgende tussen de body-tags van je HTML bestand:

<div id="scroller">
    <!-- Hier komt de inhoud van je pagina -->
</div>

<img id="background" src="URL/NAAR/JE/AFBEELDING.jpg" alt="" />

De afbeelding die we gebruiken voor de achtergrond wordt, zoals je kan zien, niet toegevoegd als achtergrondafbeelding in de CSS, maar als gewone afbeelding in de HTML. Vergeet deze ook zeker niet de id="background" mee te geven.
In een aantal voorbeelden hiervan op het internet wordt er om de afbeelding een lege div gezet, dit is niet nodig. Het levert je alleen maar extra code op en heeft totaal geen toegevoegde waarde.

De div met id="scroller" is om ervoor te zorgen dat je, als de pagina inhoud langer wordt, wel een scrollbalk te zien krijgt en de afbeelding ook echt 100% * 100% blijft.

De stijling

Na de HTML maken we nu de stijling aan (in het voorbeeldbestand heb ik het in hetzelfde bestand staan, maar dit hoort – uiteraard – in een externe stylesheet thuis):

body, html {
  padding:0;
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
#background, #scroller { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
#scroller { z-index:2; overflow:auto; }

We geven de body en html dezelfde stijling. Bij beide wordt de padding/margin op 0 gezet, om er zeker van te zijn dat we geen vreemde randen om de pagina heen krijgen. Beide worden ook een breedte/hoogte van 100% gegeven. De overflow staat voor de scrollbars, deze zetten we op hidden. Als we dat namelijk niet doen krijg je wel een scrollbar, maar klopt de hoogte van de afbeelding niet met de grootte van het daadwerkelijke document (je bent uiteraard vrij om dat te testen ).

De #background/#scroller krijgen ook nagenoeg dezelfde stijling en daarom schrijf ik de stijling niet helemaal uit voor beide, maar maak de ‘gezamelijke’ stijling op en zet daaronder voor #scroller apart neer wat er anders/bij moet. De z-index staat overigens voor de volgorde (in lagen) waarin iets weergegeven wordt. Eerst krijgen #background en #scroller allebei een z-index van 1. Daarna krijgt #scroller een z-index van 2, waardoor deze boven #background weergegeven wordt.

Bij #scroller zetten we de overflow op auto om ervoor te zorgen dat de scrollbar automatisch weergegeven wordt als de pagina-inhoud daar om vraagt.

Resultaat

Het resultaat kun je op deze pagina bekijken. Ik heb er wel iets extra’s in gezet (een #content om weer te geven wat er gebeurd als je naar een pagina met inhoud kijkt).

Belangrijk: hou er wel rekening mee dat de afbeelding meerekt met het venster. De proporties worden dus niet behouden en een afbeelding kan er vreemd uitgaan zien omdat ‘ie in de breedte te ver is uitgerekt.