Πως μπορώ να δημιουργήσω tabs μενού για ένα κομμμάτι σελιδας

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
grepi
Δημοσιεύσεις: 13
Εγγραφή: 22 Δεκ 2005 23:55
Τοποθεσία: GREECE

Πως μπορώ να δημιουργήσω tabs μενού για ένα κομμμάτι σελιδας

Δημοσίευση από grepi » 11 Αύγ 2008 12:39

γειά σας...μήπως μπορεί κάποιος να μου πει πως θα μπορούσα να φτιάξω tabs στο dreamweaver για ένα συγκεκριμένο κομμάτι μιας σελίδας και όχι για ολόκληρη τη σελίδα....όπως πχ

http://www.libs.uga.edu/#

εκεί που έχει books,articles....

ευχαριστώ ....προκαταβολικα!

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Πως μπορώ να δημιουργήσω tabs μενού για ένα κομμμάτι σελιδας

Δημοσίευση από dimsis » 12 Αύγ 2008 12:34

Έχω attached και τον κώδικα μαζί με τα 4 γραφικά στο τέλος του μηνύματος.

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http&#58;//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tabs</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
#tabbox &#123;
	width&#58; auto;
	height&#58; auto;
	padding&#58; 0;
	margin&#58; 0em 0em 0em 2em;
&#125;
#tabs &#123;
	float&#58; left;
	width&#58; auto;
	margin&#58; 0;
	padding&#58;0;
	background&#58; fffcd8;
	line-height&#58; normal;
&#125;
#tabs ul &#123;
	list-style&#58; none;
	margin&#58; 0;
	padding&#58; 0;
&#125;
#tabs li &#123;
	float&#58; left;
	background&#58; url&#40;"graphics/slidetableft.gif"&#41; no-repeat left top;
	margin&#58; 0;
	padding&#58; 0em 0.1em 0em 0.3em;
&#125;
#tabs a &#123;
	float&#58; left;
	display&#58; block;
	background&#58; url&#40;"graphics/slidetabright.gif"&#41; no-repeat right top;
	padding&#58; .3em .5em .3em .5em;
	font-family&#58; Times New Roman, Times, serif;
	font-size&#58; 1.4em;
	color&#58; #333333;
	text-decoration&#58; none;
	font-weight&#58; bold;
&#125;
/* Commented Backslash Hack
     hides rule from IE5-Mac \*/
  #tabs a &#123;
	float&#58;none;
&#125;
/* End IE5-Mac hack */


#tabs a&#58;hover &#123;
	color&#58; #ffffff;
&#125;
#tabs .selected &#123;
	background-image&#58;url&#40;"graphics/slidetablefton.gif"&#41;;
	color&#58; #ffffff;
&#125;
#tabs .selected a &#123;
	background-image&#58;url&#40;"graphics/slidetabrighton.gif"&#41;;
	color&#58; #ffffff;
&#125;
#tabs .selected a&#58;hover &#123;
	color&#58; #ffffff;
&#125;
#tabcontent &#123;
	float&#58; left;
	width&#58; 45em;
	height&#58; 11em;
	margin&#58; -0.1em 0em 0em 0em;
	padding&#58; 0em 0em 0em 0em;
	background-color&#58; #ffffff;
	border&#58; 1px solid #860000;
&#125;
</style>
<script type="text/JavaScript">
<!--
function swap_selected&#40;elem&#41;&#123;
   if&#40;elem&#41;&#123;
      //return if you clicked the selected tab
      if&#40;elem.className == "selected"&#41; return;

      var tab_1 = document.getElementById&#40;"T1"&#41;;
      var tab_2 = document.getElementById&#40;"T2"&#41;;
      var tab_3 = document.getElementById&#40;"T3"&#41;;
      var tab_4 = document.getElementById&#40;"T4"&#41;;

      var content_1 = document.getElementById&#40;"C1"&#41;;
      var content_2 = document.getElementById&#40;"C2"&#41;;
      var content_3 = document.getElementById&#40;"C3"&#41;;
      var content_4 = document.getElementById&#40;"C4"&#41;;

      if&#40;elem == tab_1&#41;&#123;
         tab_1.className = "selected";
         content_1.style.display = "block";

         tab_2.className = "";
         content_2.style.display = "none";

         tab_3.className = "";
         content_3.style.display = "none";

         tab_4.className = "";
         content_4.style.display = "none";
      &#125;
      else if&#40;elem == tab_2&#41;&#123;
         tab_2.className = "selected";
         content_2.style.display = "block";

         tab_1.className = "";
         content_1.style.display = "none";

         tab_3.className = "";
         content_3.style.display = "none";

         tab_4.className = "";
         content_4.style.display = "none";
      &#125;
      else if&#40;elem == tab_3&#41;&#123;
         tab_3.className = "selected";
         content_3.style.display = "block";

         tab_2.className = "";
         content_2.style.display = "none";

         tab_1.className = "";
         content_1.style.display = "none";

         tab_4.className = "";
         content_4.style.display = "none";
      &#125;
      else if&#40;elem == tab_4&#41;&#123;
         tab_4.className = "selected";
         content_4.style.display = "block";

         tab_2.className = "";
         content_2.style.display = "none";

         tab_3.className = "";
         content_3.style.display = "none";

         tab_1.className = "";
         content_1.style.display = "none";
      &#125;
   &#125;
&#125;
//-->
</script>
</head>
<body>
<div id="tabbox">
  <div id="tabs">
    <ul>
      <li id="T1" class="" onclick="swap_selected&#40;this&#41;"><a href="#">BOOKS</a></li>
      <li id="T2" class="selected" onclick="swap_selected&#40;this&#41;"><a 

href="#">ARTICLES</a></li>
      <li id="T3" class="" onclick="swap_selected&#40;this&#41;"><a href="#">E-JOURNALS</a></li>
      <li id="T4" class="" onclick="swap_selected&#40;this&#41;"><a href="#">GOOGLE</a></li>
    </ul>
  </div>
  <!--end tabs!-->
  <div id="tabcontent">
    <!--begin tabcontent!-->
    <div id="C1" style="display&#58; none"> tab 1 </div>
    <!--end C1!-->
    <div id="C2" style="display&#58; block"> tab 2 </div>
    <!--END gosearch-->
    <!--END C2-->
    <div id="C3" style="display&#58; none"> tab 3 </div>
    <!-- end C3 -->
    <div id="C4" style="display&#58; none"> tab 4 </div>
    <!-- end C4 -->
  </div>
  <!--end tabcontent!-->
</div>
<!--end tabbox!-->
</body>
</html>
Αλλά δες και εδώ:
http://woork.blogspot.com/2008/07/navig ... g-css.html
http://unraveled.com/projects/css_tabs/
http://labs.silverorange.com/archive/20 ... atedsimple
http://webdeveloper.econsultant.com/css ... tion-tabs/

Και εδώ για γραφικά: http://www.tabsgenerator.com/
Συνημμένα
tabs.rar
Κώδικας για tabs
(3.1 KiB) Μεταφορτώθηκε 389 φορές

grepi
Δημοσιεύσεις: 13
Εγγραφή: 22 Δεκ 2005 23:55
Τοποθεσία: GREECE

Πως μπορώ να δημιουργήσω tabs μενού για ένα κομμμάτι σελιδας

Δημοσίευση από grepi » 12 Αύγ 2008 21:43

Με βοήθησες πάρα πολύ....σ'ευχαριστώ..
τώρα το τροποποιώ στα μέτρα που θέλω

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες