Ondersteuning » Thema en CSS/opmaak » menu verticaal in themplayt maken

  • Opgelost superpeter

    (@superpeter)


    hallo allemaal.

    ik heb de volgende code in men templayt staan

    <nav class="main-menu clear-both">
                <?php
                if (function_exists('wp_nav_menu') && has_nav_menu('header-menu'))
                {
                   wp_nav_menu(array(
                      'theme_location' => 'header-menu',
                      'container' => '',
                      'menu_id' => 'menu-header'
                   ));
                }
                else
                {
                   ?>
                   <ul id="menu-header" class="menu">
                      <?php
                         echo '<li class="page_item';
                         if (is_home())
                            echo ' current_page_item';
                         echo '">';
                      ?>
                         <a href="/" title="Homepage">Home</a>
                      </li>
                      <?php wp_list_pages('title_li='); ?>
                   </ul>
                   <?php
                }
                ?>
             </nav>

    echter wil ik men lijst met pagina’s verticaal (links naar rechts)
    echter staat hij nu horizontaal (van boven naar beneden).
    graag hoor ik wat ik aan moet passen aan de code zodat hij wel van links naar rechts staat.

    wie kan me vertellen wat ik aan moet passen of toe moet voegen?

    groeten: peter

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Je bedoelt dus eigenlijk dat je het menu HORIZONTAAL wilt hebben? Je omschrijft namelijk dat het menu nu staand is (VERTICAAL).

    Een liggend menu maken van dit menu doe je door de volgende css aan te maken/passen:

    ul#menu-header { margin: 0; padding: 0; }
    ul#menu-header li { list-style: none; float: left; margin: 0 10px; }

    Thread starter superpeter

    (@superpeter)

    heel erg bedankt
    dat was hem nu alleen nog verfijnen.
    want sub menu’s staan er meteen onder.
    nog niet helemaal netjes dus.
    dus als we nog kunnen verfijnen tot een uitklap lijst of zo bij muis over of zo dan zo dat het nog wat netter maken en het helemaal af maken

    Thread starter superpeter

    (@superpeter)

    ruurd ook nu weer bedankt.
    en ben met de genoemde link inderdaad een stuk verder ge komen.
    men css code ziet er nu als volg uit

    /*
    Theme Name: Bootstrap Basic
    Theme URI:
    Author: Vee Winch
    Author URI: http://okvee.net
    Description: Bootstrap v.3 basic theme for developers to build their new theme very fast and easy.
    Version: 1.0.3.3
    License: MIT
    License URI: http://opensource.org/licenses/MIT
    Text Domain: bootstrap-basic
    Domain Path: /languages/
    Tags: white, gray, light, one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-menu, featured-images, front-page-post-form, post-formats, threaded-comments, translation-ready
    
    This theme built with Twitter Bootstrap v.3. It is basic theme with basic style for build new theme with Bootstrap.
    
    */
    
    /*
    Required WordPress CSS
    */
    ul#menu-header { margin: 0; padding: 0; }
    ul#menu-header  li { list-style: none; float: left; margin: 0 10px; }
    .alignleft {
    	display: inline;
    	float: left;
    	margin-right: 1.5em;
    }
    .alignright {
    	display: inline;
    	float: right;
    	margin-left: 1.5em;
    }
    .bypostauthor {
    }
    .gallery-caption {
    }
    .sticky {
    }
    .wp-caption {
    	border: 1px solid #ccc;
    	margin-bottom: 1.5em;
    	max-width: 100%;
    }
    .wp-caption img[class*="wp-image-"] {
    	display: block;
    	margin: 1.2% auto 0;
    	max-width: 98%;
    }
    .wp-caption-text {
    	text-align: center;
    }
    .wp-caption .wp-caption-text {
    	margin: 0.8075em 0;
    }
    body {
    	background-color: #000000;
    }
    body,td,th {
    	color: #FFFFFF;
    }
    a:link {
    	color: #FFFF00;
    }
    a:visited {
    	color: #FFFF00;
    }
    a:hover {
    	color: #FF0000;
    }
    a:active {
    	color: #00FF00;
    }
    ul {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 15px 4px 17px 0;
      list-style: none;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }
    ul li {
      font: bold 12px/18px sans-serif;
      display: inline-block;
      margin-right: -4px;
      position: relative;
      padding: 15px 20px;
    
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
    }
    ul li:hover {
    
    }
    ul li ul li { 
    
      display: block;
     ;
    }
    
    ul li ul {
      padding: 0;
      position: absolute;
      top: 48px;
      left: 0;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
    }
    ul li ul li:hover { }
    ul li:hover ul {
      display: block;
      opacity: 1;
      visibility: visible;
    }

    maar ergens klopt er iets niet want nu is het forum niet zigtbaar meer.
    altans niet de catogorieen en zo en tja wat heb je aan een forum als je hem niet kan bekijken en dus ook nix kan posten.
    ik zelf heb de indruk dat de fout in het volgende stukje zit

    ul li ul {
      padding: 0;
      position: absolute;
      top: 48px;
      left: 0;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
    }

    maar wat er presies fout is kom ik nog niet egt agter

    Heb je een werkend voorbeeld ergens staan? Graag de link hiervan 🙂

    Thread starter superpeter

    (@superpeter)

    zover als hij nu goed werkt kun je kijken op http://www.jenp.net
    de templay dit ik als uitgans punt heb gebruikt heet: bootstrap-basic
    en het forum draait onder de plugin bbpress
    indien admin regten nodig zijn mag je een acount aan maken en me dan even de gebruikersnaam laten weten dan geef ik die tijdelik admin regten

    Thread starter superpeter

    (@superpeter)

    ik ben weer verder aan het puzelen met men themplay.
    deze is nu eigelik wel goed op het forum probleem naar.
    dus hopelik comt er daarvoor nog een oplosing.

    Thread starter superpeter

    (@superpeter)

    ik wil laten weten dat alles nu goed werkt en ziet er voor hobieist zo als ik prima uit vind ik zelf
    dank iedereen voor de hulp

    Top! Fijn dat het gelukt is.

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Het onderwerp ‘menu verticaal in themplayt maken’ is gesloten voor nieuwe reacties.