Off Canvas Lösung für Wordpress?

CayZ · 02.05.2013

Hey Leute,

ich arbeite im Moment an einer responsive Website mit Wordpress. Derzeit hänge ich an der off Canvas Geschichte. Ich habe ein Tutorial Video angeschaut und versucht so einzubinden. Doch das Problem es lässt sich so nicht 1 zu 1 in WP umsetzen. So zeigte es das Video:

HTML:

<body>
    <div id="content">
        <h1><a class="open" href="#nav">Menu</a>PageSlide Responsive Demo</h1>
        <ul id="nav">
            <li><a href="">Menu Item 1</a></li>
            <li><a href="">Menu Item 2</a></li>
            <li><a href="">Menu Item 3</a></li>
            <li><a href="">Menu Item 4</a></li>
            <li><a href="">Menu Item 5</a></li>
        </ul>
</div>
    <script src="../lib/jquery-1.7.1.min.js"></script>
    <script src="../jquery.pageslide.min.js"></script>
    <script>
        $(".open").pageslide();
    </script>
</body>

Wie man sieht wird die ul id in den a class open angegeben (href).

wie muss ich das in Wordpress machen?

PHP:

So habe ich die scripte im headbereich
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri ();?>/js/jquery.pageslide.min.js"></script>
        <script type="text/javascript">
            $(".open").pageslide();
        </script>

...
<a class="open" href="#nav">Menu</a>
            <?php wp_nav_menu(array( 'theme_location' => 'header-menu',
                                     'menu_id'      => 'nav', 
            )); ?>

so sieht das bei mir aus. aber das funktioniert leider nicht. Der benötigte CSS Code steht in der style.css

Ich hoffe Ihr versteht auf was ich hinaus will und vllt hat jemand ein Tip für mich. Scripte sind auch eingebunden.