html - Horizontal til Vertical menu (content slider) - Udvikleren.dk

Tags: css html jquery

Bruger #16514 @ 24.10.11 15:19

hej,

Har problemer med at få en Horizontal menu lavet om til vertical menu.

Når jeg laver alle "span" tags om til "a" og redigerer

JScript kode

 $(".container .TabMenu span").click(function(){

om til:

JScript kode

 $(".container .sidenav a").click(function(){

så den skulle virke på når man trykkede på linket i den nye menu, men så slider menuen bare hen til en tom siden i stedet

-Souce-

nye Vertical menu:

HTML kode

 <ul class="sidenav">
     <li>
         <a href="#">1
         <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
         </a>
     </li>
     <li>
         <a href="#">2
         <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
         </a>
     </li>
     <li>
         <a href="#">3
         <span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
         </a>
     </li>
 </ul>

javascript:

JScript kode

 <script type="text/javascript">
             
             $(document).ready(function(){
                 //Initialize
                 //Set the selector in the first tab
                 $(".container .TabMenu span:first").addClass("selector");
                 
                 
                 //Basic hover action
                 $(".container .TabMenu span").mouseover(function(){
                     $(this).addClass("hovering");
                 });
                 $(".container .TabMenu span").mouseout(function(){
                     $(this).removeClass("hovering");
                 });                
                 
                 //Add click action to tab menu
                 $(".container .TabMenu span").click(function(){
                     //Remove the exist selector
                     $(".selector").removeClass("selector");
                     //Add the selector class to the sender
                     $(this).addClass("selector");
                     
                     //Find the width of a tab
                     var TabWidth = $(".TabContent:first").width();
                     if(parseInt($(".TabContent:first").css("margin-left")) > 0)
                         TabWidth += parseInt($(".TabContent:first").css("margin-left"));
                     if(parseInt($(".TabContent:first").css("margin-right")) >0)
                         TabWidth += parseInt($(".TabContent:first").css("margin-right"));
                     //But wait, how far we slide to? Let find out
                     var newLeft = -1* $("span").index(this) * TabWidth;
                     //Ok, now slide
                     $(".AllTabs").animate({
                         left: + newLeft + "px"
                     },1000);
                 });
             });
         
         </script>

css:

CSS kode

 <style type="text/css">
 
 
 
 
             .selector
             {
                 background: url(img/selector.png);
             }            
             .hovering
             {
                 background: url(img/selector.png);
                 opacity: 0.5;    
             }                        
             .container .TabMenu
             {
                 position: relative;
                 top: 0px;
                 left: 0px;
                 z-index: 10;
             }
             .container .TabMenu span
             {
                 display: inline-block;
                 height: 77px;                
                 margin: 0px;
                 padding:0px;
             }
             .container .ContentFrame
             {
                 width: 980px;
         
                 left: 0px;
                 overflow:hidden;
                 color: #fff;
                 float:left;
             }    
 
             
             
             
             
             
             
             .container .ContentFrame .AllTabs
             {
                 position: relative;    
                 left:0px;        
                 width: 2940px;
                 overflow:hidden;
                 z-index: 2;
             }
             .container .ContentFrame .AllTabs .TabContent
             {
                 width:980px;
                 background-color:#393;
                 text-align: justify;
                 float:left;
                 overflow:hidden;    
             }
             
             .TabMenu        
             {
             background: url(img/slideTabbg_middel.png);
             background-repeat:repeat-x;
             }
             .TabMenu_top_left        
             {
             background: url(img/slideTabbg_left.png);
             background-repeat:no-repeat;
             width: 7px;
             height:77px;
             float:left;
             }
             .TabMenu_top_right        
             {
             background: url(img/slideTabbg_right.png);
             background-repeat:no-repeat;
             width: 7px;
             height:77px;
             float:right;
             }
             .Content_middel_left
             {
             background: url(img/Content_middel_left.png);
             background-repeat:no-repeat;
              background-size: 100%;
             width: 7px;
             height:100%;
             float:left;
             }
             
             
             .Content_middel_right
             {
             background: url(img/Content_middel_left.png);
             background-repeat:no-repeat;
              background-size: 100%;
             width: 7px;
             height:100%;
             float:right;
             z-index: 5;
             }
             
 .TabMenu_footer {
 bottom: 0px;
 left: 0px;
 z-index: 10;
 width: 100%;
 height:9px;
 float:left;
 background: url(img/slideTabbg_middel_footer.png);
 background-repeat:repeat-x;
 position: fixed;
 }
         .TabMenu_footer_left        
             {
             background: url(img/slideTabbg_middel_footer_left.png);
             background-repeat:no-repeat;
             height:9px;
             width: 6px;
             float:left;
             }
             .TabMenu_footer_right        
             {
             background: url(img/slideTabbg_middel_footer_right.png);
             background-repeat:no-repeat;
             width: 6px;
             height:9px;
             float:right;
             }
             img#bg {
   width:7px;
   height:100%;
 }
 
 .Contentcenter{
             position: relative;            
                 width: 980px;
                 overflow:hidden;
                 align:center;margin:0 auto;
                 }
         </style>

body:

HTML kode

 <div class="container">
             <div class="TabMenu">    
             
         
             
                 <span>
                     1
                 </span>
                 <span>
                     <img src="img/ipod.png" />
                 </span>
                 <span>
                     <img src="img/drive.png" />
                 </span>
     
             
             </div>
             
 
             
             <div class="Contentcenter">
                 <div class="ContentFrame">
                     <div class="AllTabs">
                         <div class="TabContent">
                             <p>
                                 1! Site! Test!
                             </p>
                         </div>
                         <div class="TabContent">
                             <p>
                                 2! Site! Test!
                             </p>
                         </div>
                         <div class="TabContent">
                             <p>
                                 3! Site! Test!<br/>
 
                             </p>
                         </div>
                     </div>
                 </div>
             </div>
     
 
             </div>

samlet:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 
 
 <!-- JAVASCRIPT -->
 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
     <script type="text/javascript">
             
             $(document).ready(function(){
                 //Initialize
                 //Set the selector in the first tab
                 $(".container .TabMenu span:first").addClass("selector");
                 
                 
                 //Basic hover action
                 $(".container .TabMenu span").mouseover(function(){
                     $(this).addClass("hovering");
                 });
                 $(".container .TabMenu span").mouseout(function(){
                     $(this).removeClass("hovering");
                 });                
                 
                 //Add click action to tab menu
                 $(".container .TabMenu span").click(function(){
                     //Remove the exist selector
                     $(".selector").removeClass("selector");
                     //Add the selector class to the sender
                     $(this).addClass("selector");
                     
                     //Find the width of a tab
                     var TabWidth = $(".TabContent:first").width();
                     if(parseInt($(".TabContent:first").css("margin-left")) > 0)
                         TabWidth += parseInt($(".TabContent:first").css("margin-left"));
                     if(parseInt($(".TabContent:first").css("margin-right")) >0)
                         TabWidth += parseInt($(".TabContent:first").css("margin-right"));
                     //But wait, how far we slide to? Let find out
                     var newLeft = -1* $("span").index(this) * TabWidth;
                     //Ok, now slide
                     $(".AllTabs").animate({
                         left: + newLeft + "px"
                     },1000);
                 });
             });
         
         </script>
 <!-- JAVASCRIPT -->
 
 <!-- CSS -->
         <style type="text/css">
 
 
 
 
             .selector
             {
                 background: url(img/selector.png);
             }            
             .hovering
             {
                 background: url(img/selector.png);
                 opacity: 0.5;    
             }                        
             .container .TabMenu
             {
                 position: relative;
                 top: 0px;
                 left: 0px;
                 z-index: 10;
             }
             .container .TabMenu span
             {
                 display: inline-block;
                 height: 77px;                
                 margin: 0px;
                 padding:0px;
             }
             .container .ContentFrame
             {
                 width: 980px;
         
                 left: 0px;
                 overflow:hidden;
                 color: #fff;
                 float:left;
             }    
 
             
             
             
             
             
             
             .container .ContentFrame .AllTabs
             {
                 position: relative;    
                 left:0px;        
                 width: 2940px;
                 overflow:hidden;
                 z-index: 2;
             }
             .container .ContentFrame .AllTabs .TabContent
             {
                 width:980px;
                 background-color:#393;
                 text-align: justify;
                 float:left;
                 overflow:hidden;    
             }
             
             .TabMenu        
             {
             background: url(img/slideTabbg_middel.png);
             background-repeat:repeat-x;
             }
             .TabMenu_top_left        
             {
             background: url(img/slideTabbg_left.png);
             background-repeat:no-repeat;
             width: 7px;
             height:77px;
             float:left;
             }
             .TabMenu_top_right        
             {
             background: url(img/slideTabbg_right.png);
             background-repeat:no-repeat;
             width: 7px;
             height:77px;
             float:right;
             }
             .Content_middel_left
             {
             background: url(img/Content_middel_left.png);
             background-repeat:no-repeat;
              background-size: 100%;
             width: 7px;
             height:100%;
             float:left;
             }
             
             
             .Content_middel_right
             {
             background: url(img/Content_middel_left.png);
             background-repeat:no-repeat;
              background-size: 100%;
             width: 7px;
             height:100%;
             float:right;
             z-index: 5;
             }
             
 .TabMenu_footer {
 bottom: 0px;
 left: 0px;
 z-index: 10;
 width: 100%;
 height:9px;
 float:left;
 background: url(img/slideTabbg_middel_footer.png);
 background-repeat:repeat-x;
 position: fixed;
 }
         .TabMenu_footer_left        
             {
             background: url(img/slideTabbg_middel_footer_left.png);
             background-repeat:no-repeat;
             height:9px;
             width: 6px;
             float:left;
             }
             .TabMenu_footer_right        
             {
             background: url(img/slideTabbg_middel_footer_right.png);
             background-repeat:no-repeat;
             width: 6px;
             height:9px;
             float:right;
             }
             img#bg {
   width:7px;
   height:100%;
 }
 
 .Contentcenter{
             position: relative;            
                 width: 980px;
                 overflow:hidden;
                 align:center;margin:0 auto;
                 }
         </style>
 <!-- CSS -->
 
 
  </head>
     <body>
  
         <div class="container">
             <div class="TabMenu">    
             
         
             
                 <span>
                 1
                 </span>
                 <span>
                 2
                 </span>
                 <span>
                 3
                 </span>
     
             
             </div>
             
 
             
             <div class="Contentcenter">
                 <div class="ContentFrame">
                     <div class="AllTabs">
                         <div class="TabContent">
                             <p>
                                 1
                             </p>
                         </div>
                         <div class="TabContent">
                             <p>
                                 2
                             </p>
                         </div>
                         <div class="TabContent">
                             <p>
                                 3
                             </p>
                         </div>
                     </div>
                 </div>
             </div>
     
 
             </div>    
     
     </body>
 </html>

Mvh lasse , Mange tak

Indlæg senest redigeret d. 24.10.2011 15:20 af Bruger #16514

2 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #15511 @ 24.10.11 15:52

Hej Lasse,

Hvis du gerne vil bruge a-tags i stedet for span-tags, så skal du bare huske at gennemgå hele din javascript-kode, for evt. andre rettelser.

Jeg har rettet javascript-koden til dig, så den kan bruges til a-tags, hvis det var det som var ønsket.

JScript kode

 <script type="text/javascript">
         $(document).ready(function(){
         //Initialize
         //Set the selector in the first tab
         $(".container .TabMenu a:first").addClass("selector");
         //Basic hover action
         $(".container .TabMenu a").mouseover(function(){
         $(this).addClass("hovering");
         });
         $(".container .TabMenu a").mouseout(function(){
         $(this).removeClass("hovering");
         });
         //Add click action to tab menu
         $(".container .TabMenu a").click(function(){
         //Remove the exist selector
         $(".selector").removeClass("selector");
         //Add the selector class to the sender
         $(this).addClass("selector");
         //Find the width of a tab
         var TabWidth = $(".TabContent:first").width();
         if(parseInt($(".TabContent:first").css("margin-left")) > 0)
         TabWidth += parseInt($(".TabContent:first").css("margin-left"));
         if(parseInt($(".TabContent:first").css("margin-right")) >0)
         TabWidth += parseInt($(".TabContent:first").css("margin-right"));
         //But wait, how far we slide to? Let find out
         var newLeft = -1* $("a").index(this) * TabWidth;
         //Ok, now slide
         $(".AllTabs").animate({
         left: + newLeft + "px"
         },1000);
         });
         });
     </script>

Bruger #16514 @ 24.10.11 18:05

hej igen mange tak nicolai for den gode hjælp, fik det til at virke med din sample kode

er løbet ind i et andet problem, som jeg synes er meget mærkelig.
denne kode virker uden problemer:

HTML kode

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 
 
 <!-- JAVASCRIPT -->
 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
      <script type="text/javascript">
          $(document).ready(function(){
          //Initialize
          //Set the selector in the first tab
          $(".containerJAVA .TabMenuJava a:first").addClass("selector");
          //Basic hover action
          $(".containerJAVA .TabMenuJava a").mouseover(function(){
          $(this).addClass("hovering");
          });
          $(".containerJAVA .TabMenuJava a").mouseout(function(){
          $(this).removeClass("hovering");
          });
          //Add click action to tab menu
          $(".containerJAVA .TabMenuJava a").click(function(){
          //Remove the exist selector
          $(".selector").removeClass("selector");
          //Add the selector class to the sender
          $(this).addClass("selector");
          //Find the width of a tab
          var TabWidth = $(".TabContent:first").width();
          if(parseInt($(".TabContent:first").css("margin-left")) > 0)
          TabWidth += parseInt($(".TabContent:first").css("margin-left"));
          if(parseInt($(".TabContent:first").css("margin-right")) >0)
          TabWidth += parseInt($(".TabContent:first").css("margin-right"));
          //But wait, how far we slide to? Let find out
          var newLeft = -1* $("a").index(this) * TabWidth;
          //Ok, now slide
          $(".AllTabs").animate({
          left: + newLeft + "px"
          },1000);
          });
          });
      </script>
 <!-- JAVASCRIPT -->
 
 
 <!-- CSS -->
 <link href="include/css/facebook.css" rel="stylesheet" type="text/css" />
 <link href="include/css/body.css" rel="stylesheet" type="text/css" /> 
 <link href="include/css/sidebar_left.css" rel="stylesheet" type="text/css" /> 
 <link href="include/css/sidebar_center.css" rel="stylesheet" type="text/css" /> 
 <link href="include/css/sidebar_right.css" rel="stylesheet" type="text/css" /> 
 <link href="include/css/header.css" rel="stylesheet" type="text/css" />
 <link href="include/css/footer.css" rel="stylesheet" type="text/css" /> 
 <link href="include/css/contentslider.css" rel="stylesheet" type="text/css" />
 <!-- CSS -->
 
 
  </head>
     <body>
 <div style="padding-top:10px;clear:both;">
     
 fs
 
 </div>
         <div class="containerJAVA">
 
     <div class="sidebar_left">
     <?php include ("include/commen/sidebar_left.php"); ?>
             </div>
             
 
             
             <div class="Contentcenter">
                 <div class="ContentFrame">
                     <div class="AllTabs">
                         <div class="TabContent">
                             <p>
                             <?php include ("include/modul/facebookbox.php"); ?>
                             </p>
                         </div>
                         <div class="TabContent">
                             <p>
                                 2
                             </p>
                         </div>
                         <div class="TabContent">
                             <p>
                                 3
                             </p>
                         </div>
                     </div>
                 </div>
             </div>
         <div class="sidebar_right">
 right
             </div>
 
             </div>    
             
 <div class="footwrap">
 <div class="col4">
 <section>
         <h3 class="sech2">USER INTERFACE</h2>
         <ul style="list-style: none;">
                 <div class="footermenypadding">
                     <li><a href="#" rel="nofollow" target="_blank">Billeder</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Chat</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Søg</a></li>    
                     </div>
                 </ul>
         
 </section>
 <div class="divborder"></div>
 <section>
 <h3 class="sech2">INFORMATION</h2>
 <ul style="list-style: none;">
                 <div class="footermenypadding">
                     <li><a href="#" rel="nofollow" target="_blank">Handelsbetingelser</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Generelle Regler</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">FAQ</a></li>
                     </div>
                 </ul>
 </section>
 <div class="divborder"></div>
 <section>
 <h3 class="sech2">WINDOWS</h2>
 <ul style="list-style: none;">
                 <div class="footermenypadding">
                     <li><a href="#" rel="nofollow" target="_blank">Webcams</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Videos</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Dating</a></li>
                     </div>
                 </ul>
 </section>
 <div class="divborder"></div>
 <section>
 <h3 class="sech2">HJÆLP</h2>
 <ul style="list-style: none;">
                 <div align="left" class="footermenypadding">
                     <li><a href="#" rel="nofollow" target="_blank">Hjælp &amp; Support</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Copyright</a></li>
                     <li><a href="#" rel="nofollow" target="_blank">Kontakt</a></li>
                     </div>
                 </ul>
 </section>
 </div>
 <div class="colend">
 Copyright © 2011 zzzzzzzzz All Rights Reserved.
 </div>
 </div>    
     
     </body>
 </html>

men når jeg ændrer/tilfører et link eller en lu menu i min test div som er i toppen af siden:

HTML kode

 <div style="padding-top:10px;clear:both;">
     
     <ul>
     <li>
 <a title="" href="">Startside</a>
     </li>
         <li>
 <a title="" href="">Home</a>
     </li>
     </ul>
 
 </div>

så virker slider ikke, kan finde trykke og den slider selve div,s men af en eller anden årsag så slider den content for lang eller noget iden stil, så man kan ikke se noget i dem.

Skal man oprette en ny tråd, når det er et nyt problem?

mvh lasse, tak

Indlæg senest redigeret d. 27.10.2011 19:11 af Bruger #16514

Horizontal til Vertical menu (content slider)

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler