Hallo zusammen,
vielleicht kann mir jmd von Euch helfen. Ich möchte WP rein als Backend nutzen. D.h den Inhalt von einem Modul möchte ich in meiner Portfolioseite anzeigen.
Ich habe mir dazu ein Design gebastelt. Wenn ich jetzt auf ein Menüpunkt klicke soll sich das Menü nach links verschieben und in der neu aufgebauten Seite soll dann der Inhalt eines Modul angezeigt werden.
Das verschieben funktioniert soweit recht gut - "nur" der Inhalt wird leider nicht angezeigt. Hier dann beispielsweise Impressum.
PHP
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Testino</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="114.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="72.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="57.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="129.png">
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" href="css/style.css">
<!-- end CSS-->
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
</head>
<body>
<img src="img/bg/bg1.jpg" id="bg1" alt="Testino" />
<img src="img/bg/bg2.jpg" id="bg2" alt="Testino" />
<img src="img/bg/bg3.jpg" id="bg3" alt="Testino" />
<img src="img/bg/bg4.jpg" id="bg4" alt="Testino" />
<img src="img/bg/bg5.jpg" id="bg5" alt="Testino" />
<img src="img/bg/bg6.jpg" id="bg6" alt="Testino" />
<div id="cntBox">
</div>
<div id="d_menu">
<ul id="das_menu">
<center>
<li class="mnu_entry"><a href="#" class="mnu_lnk">NEWS & KOLUMNE</a></li>
<img src="img/linie.png" width="180" alt="Trennlinie">
<li class="mnu_entry"><a href="#" class="mnu_lnk">FOTOS</a></li>
<img src="img/linie.png" width="180" alt="Trennlinie">
<li class="mnu_entry"><a href="#" class="mnu_lnk">DOWNLOADS</a></li>
<img src="img/linie.png" width="180" alt="Trennlinie">
<li class="mnu_entry"><a href="impressum" class="mnu_lnk">IMPRESSUM</a></li>
<img src="img/linie.png" width="180" alt="Trennlinie">
</center>
</ul>
<div id="fb_btn"><a href="facebook.com" target="_blank"><img src="/img/btn_fb.png" alt="Testino"></a></div>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="js/libs/jquery-1.7.1.min.js"></script>
<script src="js/libs/easing.js"></script>
<!-- <script src="js/mylibs/lib.js"></script> -->
<script>
$(document).ready(function(){
//$(function() {
function getRandom(){
var z = new Date().getTime();
z = Math.round(z / 10);
z %= 5;
z++;
return z;
}
var theWindow = $(window),
$bg = $("#bg"+getRandom()),
$d_menu = $("#d_menu"),
$d_cnt = $("#cntBox"),
dasObjekt,
derErsteWert = 0,
aspectRatio = $bg.width() / $bg.height();
$bg.css("display","block");
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
$d_menu.css('min-height',theWindow.height());
if(derErsteWert == 0)
$d_menu.center();
$d_menu.show();
}
theWindow.resize(function() {
$d_cnt.css("height", theWindow.height());
resizeBg();
}).trigger("resize");
$d_menu.bind("click", function(){
//$(this).center();
$bg.css("display","none");
$bg = $("#bg"+getRandom());
resizeBg();
$bg.css("display","block");
dasObjekt = $(this).position();
//console.log(dasObjekt.left);
if(derErsteWert == 0){
derErsteWert = dasObjekt.left;
$d_cnt.css("left", derErsteWert-122+"px");
}
if(dasObjekt.left >= derErsteWert){
$d_menu.stop().animate({
left: dasObjekt.left-360+"px"
}, 550, "easeInOutQuad", function(){
$d_cnt.show();
$d_cnt.stop().animate({
width: "540px"
}, 700, "easeInOutQuad");
});
}
});
});
jQuery.fn.center=function(){this.css("position","absolute");this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+"px");return this;};
</script>
</body>
</html>
Hat jmd von Euch eine Idee wie ich das realisieren kann??? Vielen Dank für Eure Mühe.
Beste Grüße
Daniel