Kan ikke tilføje ekstra menupunkt
Hej alle,Jeg har fundet et design, som jeg nu forsøger at ændre en lille smule på, da jeg skal have tilføjet endnu et menupunkt.
Det foregår sådan at når man trykker på en menu, så kommer selve indholdet "flyvende" ind fra højre.
Jeg har forsøgt at ændre alt hvad jeg synes der var relevant, men må åbenbart mangle noget da menuer roder helt rundt.
Derfor vil jeg høre om en af jer vil hjælpe mig med hvad jeg præcist skal ændre, for at der kommer et femte menupunkt på siden.
Herunder er index.html, javascript.js og style.css
Jeg ved godt at det kræver lidt arbejde for jer, at kigge det hele igennem da der er mange steder der skal ændres, men håber at en vil tage sig tiden - jeg har virkelig brug for det :)
PFT
walkie
----------------------------------------------------------------------------------------------------
INDEX.HTML
----------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>
<body>
<div id="leftSide">
<!--Site Title-->
<div id="title">
<!--Main Title-->
<h1><span></span>Title</h1>
<!--Caption/Sub Title-->
<span class="titleSubText">Subtitle</span>
</div>
<div id="arrowWrapper"><div id="arrow"></div></div>
<div id="buttonsWrapper">
<!--About Button-->
<div id="aboutButtonWrapper">
<div class="navButton" id="aboutButton"></div>
<div class="navCaption" id="aboutCaption">
<!--About Button: Label-->
<span class="navCaptionText">about</span><br />
<!--About Button: Sub-Label-->
<span class="navSubCaptionText">who I am</span>
</div>
</div>
<!--Portfolio Button-->
<div id="portfolioButtonWrapper">
<div class="navButton" id="portfolioButton"></div>
<div class="navCaption" id="portfolioCaption">
<!--Portfolio Button: Label-->
<span class="navCaptionText">portfolio</span><br />
<!--Portfolio Button: Sub-Label-->
<span class="navSubCaptionText">my work</span>
</div>
</div>
<!--Services Button-->
<div id="servicesButtonWrapper">
<div class="navButton" id="servicesButton"></div>
<div class="navCaption" id="servicesCaption">
<!--Services Button: Label-->
<span class="navCaptionText">services</span><br />
<!--Services Button: Sub-Label-->
<span class="navSubCaptionText">what I do</span>
</div>
</div>
<!--Contact Button-->
<div id="contactButtonWrapper">
<div class="navButton" id="contactButton"></div>
<div class="navCaption" id="contactCaption">
<!--Contact Button: Label-->
<span class="navCaptionText">contact</span><br />
<!--Contact Button: Sub-Label-->
<span class="navSubCaptionText">get in touch</span>
</div>
</div>
</div>
</div>
<div id="contentPanelWrapper">
<div id="contentPanelEdge"></div>
<!--Wrapper That Contains 'About' Content-->
<div class="content" id="aboutContent">
<!--Title-->
<div class="contentTitle">about</div>
<!--Body Text-->
<div id="aboutText">
<h3>Who I Am</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
sagittis id neque.</p><br />
<p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
</div>
</div>
<!--Wrapper That Contains 'Portfolio' Content-->
<div class="content" id="portfolioContent">
<!--Title-->
<div class="contentTitle">portfolio</div>
<!--Image Slider-->
<div id="portfolioSlider">
<div id="sliderToolbar">
<div class="sliderButton" id="prevButton"></div>
<div class="sliderButton" id="nextButton"></div>
</div>
<div id="imageWrapper">
<ul id="imgList">
<!--Portfolio Images Go Here (See Documentation)-->
<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
</ul>
</div>
</div>
</div>
<!--Wrapper That Contains 'Services' Content-->
<div class="content" id="servicesContent">
<!--Title-->
<div class="contentTitle">services</div>
<!--Service 1 Column-->
<div class="serviceColumn" id="serviceColumn1">
<h3>Identity Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 2 Column-->
<div class="serviceColumn" id="serviceColumn2">
<h3>Web Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
<!--Service 3 Column-->
<div class="serviceColumn" id="serviceColumn3">
<h3>Icon + UI Design</h3><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
at pharetra ligula urna ut ligula.</p>
</div>
</div>
<!--Wrapper That Contains 'Contact' Content-->
<div class="content" id="contactContent">
<!--Title-->
<div class="contentTitle">contact</div>
<div id="contactFormWrapper">
<!--Contact Form-->
<form id="contact" method="post" action="mail.php">
<input type="text" id="name" name="name" value="name" />
<input type="text" id="email" name="email" value="email" /><br /><br />
<textarea id="message" name="message" rows="" cols="">message</textarea>
<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
</form>
<div id="successMessage"></div>
</div>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
JAVASCRIPT.JS
----------------------------------------------------------------------------------------------------
numImages=0;
currentImage=1;
currentPanel="none";
$(document).ready(function(){
// Initializes FancyBox Lightbox
$("a.sliderImage").fancybox({
'zoomSpeedIn':200,
'zoomSpeedOut':200,
'overlayShow':true,
'padding':4
});
SelectButton("none");
$("#arrow").fadeOut(0);
if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
$("input").css({"height":13});
$("#name").css({"width":155});
};
$("#title").click(function(){
ShowPanel("none");
});
// Handles Formatting the Portfolio Slider
$("#imgList").children().each(function(){
numImages++;
});
$("#imageWrapper").css({"width":(numImages*541)});
// Handles Function of the Portfolio Slider
$("#prevButton").click(function(){
if (currentImage==1){
currentImage=numImages;
} else {
currentImage--;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
$("#nextButton").click(function(){
if (currentImage==numImages){
currentImage=1;
} else {
currentImage++;
};
$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
});
// Handles Rollover and Click For the Nav Buttons
$("#aboutButton").mouseenter(function(){
SelectButton("about");
});
$("#portfolioButton").mouseenter(function(){
SelectButton("portfolio");
});
$("#servicesButton").mouseenter(function(){
SelectButton("services");
});
$("#contactButton").mouseenter(function(){
SelectButton("contact");
});
$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
SelectButton("none");
});
$("#aboutButton").click(function(){
ShowPanel("about");
});
$("#portfolioButton").click(function(){
ShowPanel("portfolio");
});
$("#servicesButton").click(function(){
ShowPanel("services");
});
$("#contactButton").click(function(){
ShowPanel("contact");
});
// Handles Contact Form Behavior
$("#name").focus(function(){
$("#name").css({"background-color":"#FFFFFF"});
if ($("#name").val()=="name"){
$("#name").val("");
$("#name").css({"color":"#444444"});
};
});
$("#name").blur(function(){
if ($("#name").val()==""){
$("#name").val("name");
$("#name").css({"color":"#888888"});
$("#name").css({"background-color":"#ffdddd"});
};
});
$("#email").focus(function(){
$("#email").css({"background-color":"#FFFFFF"});
if ($("#email").val()=="email"){
$("#email").val("");
$("#email").css({"color":"#444444"});
};
});
$("#email").blur(function(){
if ($("#email").val()==""){
$("#email").val("email");
$("#email").css({"color":"#888888"});
$("#email").css({"background-color":"#ffdddd"});
};
if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
$("#email").css({"background-color":"#ffdddd"});
};
});
$("#message").focus(function(){
$("#message").css({"background-color":"#FFFFFF"});
if ($("#message").val()=="message"){
$("#message").val("");
$("#message").css({"color":"#444444"});
};
});
$("#message").blur(function(){
if ($("#message").val()==""){
$("#message").val("message");
$("#message").css({"color":"#888888"});
$("#message").css({"background-color":"#ffdddd"});
};
});
$("#submit").mousedown(function(){
$("#submit").attr({"src":"images/sendButtonSel.png"});
});
$("#submit").mouseup(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#submit").mouseout(function(){
$("#submit").attr({"src":"images/sendButton.png"});
});
$("#name,#email,#message").keyup(function(){
if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
EnableSubmitButton();
} else {
DisableSubmitButton();
};
});
$("#submit").click(function(){
DisableSubmitButton();
var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
$.ajax({
type: "POST",
url: "mail.php",
data: dataString,
success: function() {
ResetForm();
$("#successMessage").fadeIn(10);
setTimeout('$("#successMessage").fadeOut(1000);',2000);
}
});
return false;
});
});
function EnableSubmitButton(){
$("#submit").attr({"disabled":""});
$("#submit").attr({"src":"images/sendButton.png"});
};
function DisableSubmitButton(){
$("#submit").attr({"disabled":"disabled"});
$("#submit").attr({"src":"images/sendButtonDis.png"});
};
function ResetForm(){
DisableSubmitButton();
$("#name, #email, #message").css({"background-color":"#FFFFFF"});
$("#name, #email, #message").css({"color":"#888888"});
$("#name").val("name");
$("#email").val("email");
$("#message").val("message");
};
function ShowPanel(panel){
currentPanel=panel;
SelectButton(panel);
$(".content").fadeOut(250);
switch(panel){
case "none":
$("#contentPanelWrapper").animate({"left":"100%"},500);
$("#arrow").fadeOut(50)
break;
case "about":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#aboutContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
break;
case "portfolio":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#portfolioContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
break;
case "services":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#servicesContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
break;
case "contact":
$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
$("#contactContent").show();
$("#contentPanelWrapper").animate({"left":"44%"},500);
});
$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
break;
};
};
function SelectButton(button){
if (currentPanel!="about"){
$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"0px 0px"});
};
if (currentPanel!="portfolio"){
$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"0px -64px"});
};
if (currentPanel!="services"){
$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"0px -128px"});
};
if (currentPanel!="contact"){
$("#contactCaption").animate({"left":50},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
$("#contactButton").css({"background-position":"0px -192px"});
};
switch(button){
case "none":
break;
case "about":
$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
$("#aboutButton").css({"background-position":"65px 0px"});
break;
case "portfolio":
$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
$("#portfolioButton").css({"background-position":"65px -64px"});
break;
case "services":
$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
$("#servicesButton").css({"background-position":"65px -128px"});
break;
case "contact":
$("#contactCaption").animate({"left":70},{queue:false, duration:250});
$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
$("#contactButton").css({"background-position":"65px -192px"});
break;
};
};
----------------------------------------------------------------------------------------------------
STYLE.CSS
----------------------------------------------------------------------------------------------------
@charset "UTF-8";
* { margin: 0; padding: 0; border: none; outline: none; text-decoration: none; }
body {
background-color:#eec015;
overflow:hidden;
}
h1 {
position:relative;
font-family:Helvetica, Arial, sans-serif;
color:#FFFFFF;
font-size:19pt;
font-weight:normal;
text-shadow: rgba(0,0,0,0.75) 0px 1px 2px;
}
h1 span {
background: url(../images/textGradient.png) repeat-x;
position:absolute;
display:block;
width:100%;
height:30px;
}
h3 {
font-size:10pt;
}
#name, #email, #message {
border:1px #A5A5A5 solid;
background-color:#FFFFFF;;
font-family:Helvetica, Arial, sans-serif;
font-size:10pt;
resize:none;
color:#888888;
}
#name, #email {
height:20px;
width:166px;
padding-top:4px;
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
}
#message {
width:344px;
height:51px;
padding-top:4px;
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
}
#submit {
padding-top:6px;
}
#leftSide {
position:absolute;
left:0px;
right:57%;
top:0px;
bottom:0px;
width:auto;
height:auto;
background-color:#4f545a;
background-image:url(../images/leftSide7.png);
background-position:right;
background-repeat:repeat-y;
}
#title {
position:absolute;
top:50%;
margin-top:-33px;
right:265px;
width:auto;
height:66px;
text-align:right;
line-height:26px;
cursor:pointer;
}
.titleSubText {
font-family:Helvetica, Arial, sans-serif;
color:#a2a0a0;
font-size:10pt;
text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}
#arrowWrapper {
position:absolute;
top:50%;
margin-top:-143px;
right:170px;
width:12px;
height:286px;
}
#arrow {
position:absolute;
left:0px;
top:22px;
width:12px;
height:20px;
background-image:url(../images/highlightArrow.png);
}
#buttonsWrapper {
position:absolute;
top:50%;
margin-top:-143px;
right:15px;
width:145px;
height:286px;
}
#aboutButtonWrapper {
position:absolute;
left:0px;
top:3px;
width:145px;
height:64px;
}
#aboutButton {
background-position:0px 0px;
}
#portfolioButtonWrapper {
position:absolute;
left:0px;
top:76px;
width:145px;
height:64px;
}
#portfolioButton {
background-position:0px -64px;
}
#servicesButtonWrapper {
position:absolute;
left:0px;
top:148px;
width:145px;
height:64px;
}
#servicesButton {
background-position:0px -128px;
}
#contactButtonWrapper {
position:absolute;
left:0px;
top:221px;
width:145px;
height:64px;
}
#contactButton {
background-position:0px -192px;
}
.navButton {
position:absolute;
left:0px;
top:0px;
width:65px;
height:64px;
background-image:url(../images/icons.png);
cursor:pointer;
z-index:2;
}
.navCaption {
position:absolute;
left:50px;
top:16px;
width:75px;
height:40px;
opacity:0;
z-index:1;
}
.navCaptionText {
font-family:Helvetica, Arial, sans-serif;
color:#c2c2c2;
font-size:11pt;
text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}
.navSubCaptionText {
font-family:Helvetica, Arial, sans-serif;
color:#898989;
font-size:8pt;
text-shadow: rgba(0,0,0,0.5) 0px 1px 2px;
}
#contentPanelWrapper {
position:absolute;
top:50%;
margin-top:-140px;
left:100%;
right:0px;
width:auto;
height:280px;
background-image:url(../images/panelBack.png);
overflow:hidden;
}
#contentPanelEdge {
position:absolute;
left:0px;
top:0px;
width:30px;
height:280px;
background-image:url(../images/panelEdge2.png);
}
.content {
position:absolute;
left:37px;
top:27px;
width:565px;
height:185px;
padding-top:45px;
}
.contentTitle {
position:absolute;
left:0px;
top:0px;
width:565px;
height:30px;
font-family:Helvetica, Arial, sans-serif;
color:#434242;
font-size:16pt;
text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
}
#aboutContent {
display:none;
}
#aboutText {
height:144px;
font-family:Helvetica, Arial, sans-serif;
color:#434242;
font-size:10pt;
text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
overflow:auto;
}
#portfolioContent {
background-image:url(../images/sliderBack.png);
background-position:-3px 50px;
background-repeat:no-repeat;
display:none;
}
#portfolioSlider {
position:absolute;
left:8px;
top:60px;
width:541px;
height:139px;
overflow:hidden;
}
#imageWrapper {
position:absolute;
left:0px;
top:0px;
width:541px;
height:139px;
}
#imgList ul {
list-style:none;
}
#imgList li {
display:inline;
float:left;
}
#sliderToolbar {
position:absolute;
top:85px;
left:193px;
width:154px;
height:48px;
background-image:url(../images/navbarBack.png);
z-index:3;
}
.sliderButton {
position:absolute;
top:8px;
width:32px;
height:31px;
background-image:url(../images/navButtons.png);
cursor:pointer;
}
#prevButton {
left:26px;
background-position:0px 0px;
}
#prevButton:active {
background-position:32px 0px;
}
#nextButton {
left:99px;
background-position:0px -62px;
}
#nextButton:active {
background-position:32px -62px;
}
#servicesContent {
display:none;
}
.serviceColumn {
position:absolute;
top:55px;
width:165px;
height:165px;
font-family:Helvetica, Arial, sans-serif;
color:#434242;
font-size:8pt;
text-shadow: rgba(255,255,255,0.75) 0px 1px 0px;
line-height:12pt;
}
#serviceColumn1 {
left:0px;
}
#serviceColumn2 {
left:200px;
}
#serviceColumn3 {
left:400px;
}
#contactContent {
display:none;
}
#contactFormWrapper {
position:absolute;
left:2px;
top:67px;
width:350px;
height:150px;
}
#contact {
line-height:7px;
letter-spacing:1px;
text-align:right;
}
#successMessage {
position:absolute;
left:0px;
top:102px;
width:129px;
height:27px;
background-image:url(../images/sentBadge.png);
z-index:3;
display:none;
}
#submit {
width:84px;
height:27px;
}
