Ondersteuning » Code oplossingen gezocht » Uitschuif Menu van links over de hele hoogte

  • Beste Lezer

    Ik ben bezig met een website waar ik een uitschuif menu wil maken die begint links over de hele hoogte en daar moet dan een twee keer een sub menu van links naar recht uitschuiven. En dan moet de page informatie in een div worden geplaats.

    Nu is het laatste deel niet zo moeilijk om dan ook wordpress goed te kunnen gebruiken. Ik krijg alleen het eerste deel niet voor elkaar.
    Ik heb het nu wel voor elkaar maar dan heb ik niks meer aan me wordpress. en aangezien een bedrijf dit straks moet gebruiken.
    Ik hoop dat iemand mij verder kan helpen. Zal hier onder de code plaatsen die ik nu heb. Ik werk nog van een localhost dus kan jullie helaas nog niks laten zien. Zal wel een afbeelding plaatsen met hoe het er uit moet komen te zien.

    css

    'box{width: 300px; height 300px; background-color: #945678 }
    .toggler {
        width: 500px;
        height: 200px;
      }
      #button {
        padding: .5em 1em;
        text-decoration: none;
      }
      #effect {
        position: absolute;
    
        z-index: 3;
        width: 240px;
        height: 600px;
        padding: 0.4em;
    	display: none;
    	overflow: auto;
    
      }
      #effect h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
    
      }
    
        #button2 {
        padding: .5em 1em;
        text-decoration: none;
      }
      #effect2 {
        position: absolute;
    
        z-index: 8;
        width: 240px;
        height: 600px;
        padding: 0.4em;
    	display: none;
    	overflow: hidden;
      }
      #effect h3 {
        margin: 0;
        padding: 0.4em;
        text-align: center;
      }
       #button2 {
        padding: .5em 1em;
        text-decoration: none;
      }
      #effect3 {
        position: absolute;
    
        z-index: 2;
        width: 240px;
        height: 600px;
    
    	margin-left:246px;
    	padding: 0.4em;
    	display: none;
    	overflow: hidden;}
    #navleft {float: left; width:200px; background-color: #000;}'

    Index

    '<?php get_header(); ?>
    
    <script>
    
      </script>
    
    <!doctype html>
    
    <!-- menu line  -->
    
    <div id="navleft"><?php include("navleft.php"); ?></div>
    
    <div id="nav2">
    	<div id="effect" class="ui-widget-content ui-corner-all">
    		<h3 class="ui-widget-header ui-corner-all"></h3>
    		<p><?php wp_nav_menu( array('menu' => 'degidts' )); ?>
    		<div id="homebutton3"><button id="button3"> <?php $pageID = 50;$page = get_post($pageID);echo $page->post_title;?></button></div>
    
    			</p>
    	</div>
    
    	<div id="effect2" class="ui-widget-content ui-corner-all">
    		<h3 class="ui-widget-header ui-corner-all"></h3>
    
    <ul>
    </ul>
    	</div>
    
    <!-- menu line 3 -->
    
    	<div id="effect3" class="ui-widget-content ui-corner-all">
    		<h3 class="ui-widget-header ui-corner-all"></h3>
    		<div id="navigation">
    
    		<?php wp_nav_menu( array('menu' => 'meet' )); ?>
    
    	</div>
    </div>
    
    </body>
    </html>
    
    </div>
    
    	 </div><!-- close main -->
        <?php get_sidebar(); ?>
        <?php get_footer(); ?>
    
    '

    Header

    '<!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 profile="http://gmpg.org/xfn/11?>
        <title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta charset="utf-8">
        <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0? href="<?php bloginfo('rss2_url'); ?>" />
        <link rel="alternate" type="text/xml" title="RSS .92? href="<?php bloginfo('rss_url'); ?>" />
    
        <link rel="alternate" type="application/atom+xml" title="Atom 0.3? href="<?php bloginfo('atom_url'); ?>" />
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <?php wp_get_archives('type=monthly&format=link'); ?>
        <?php //comments_popup_script(); // off by default ?>
      <?php $pageid = get_post_meta( $item->ID, '_menu_item_object_id', true );?>
    
        </head>
    
        <!--
        Vanaf hier kun je gaan aanpassen. Pas de verschillende divs naar wens aan.
        Als je bovenstaande template gebruikt hoef je niets te doen.
        -->
    
        <div id="wrapper">
    
        <div id="header">
    	<div id="gidts">Gidts</div>
    	<div id="imperial">Imperial	</div>
    	<div id="anaparts">Anaparts</div>
    	<div id="virago">Virago</div>
    
        </div><!-- close header -->
    
    	'

    Functions theme

    '<?php require_once('portfolio-posttype.php'); ?>
    
    <?php if ( function_exists('register_sidebar') )
    register_sidebar(array(
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4>',
    'after_title' => '</h4>',
    )); ?>
    <?php
    register_nav_menus( array(
        'primary' => __( 'Primary Navigation', 'mytheme' )
    ) );
    
    // Add fallback for navigation
    function mytheme_page_menu() { ?>
    <ul class="menu">
        <li<?php if ( is_home() ) echo ' class="selected"'; ?>><a>">Home</a>
        <?php wp_list_pages( 'depth=1&title_li=' ); ?>
    
    <?php } ?>
    
    <?php
    function getportfolio_thumbnailurl($pid){
        $image_id = get_post_thumbnail_id($pid);
        $image_url = wp_get_attachment_image_src($image_id,'Screenshot');
        return  $image_url[0];
    }
    ?>
    
    <?php
    if ( function_exists( 'add_image_size' ) ) {
        add_image_size( 'sliderimg', 200, 150, true );
    }
    ?>
    
    <?php
    // WP3 menus
    register_nav_menus( array(
        'primary' => __( 'Header Navigation', '' ),
    ) );
    ?>'
    Navleft
    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script src="\dgftest\wp-content\themes\new style\myjs.js"></script>
    
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <?php wp_head(); ?>
    	<script>
    $(function() {
        $('#button').click(function(){
    $('#effect').toggle('slide',500)
    $('#effect2').hide('slide',500)
    $('#effect3').hide('slide',500)
    })
      });
    
       $(function() {
        $('#button2').click(function(){
    $('#effect2').toggle('slide',500)
    $('#effect').hide('slide',500)
    $('#effect3').hide('slide',500)
    })
      });
    
       $(function() {
        $('#button3').click(function(){
    $('#effect3').toggle('slide',500)
    })
      });
      </script>
    
    <div id="homebutton"><button id="button">Home</button></div>
    
    <div id="homebutton"><button id="button2">Producten</button></div>
    <div id="homebutton"><button id="button">Over Ons</button></div>
    <div id="homebutton"><button id="button">Contact</button></div>
    <div id="homebutton"><button id="button">Home</button></div>
    '

    Alvast bedankt

    Hoop echt dat iemand mij kan helpen

  • Het onderwerp ‘Uitschuif Menu van links over de hele hoogte’ is gesloten voor nieuwe reacties.