Moet je alleen de tabs hebben of de hele website gebouwd hebben?
Ik kan de site bouwen in Drupal met alles erop en eraan.

Laat maar weten,
Gr
Quinten

Site heb ik al. Moet de tabs hebben..

Om het nog iets uitgebreider te omschrijven voor de mensen die het niet snappen...:

Ik ben bezig met het invullen van mijn website. Ik kom regelmatig tegen dat ik meerdere dingen wil weergeven maar geen lange pagina's wil.

Ik ben dus opzoek naar iemand die een tabel kan maken met menuknoppen er boven.
Zoals ik reeds zij, gebruikt funda het ook. Daar kan je klikken tussen Overzicht, Omschrijving, Kenmerken, etc.
Ook 4lauch gebruikt het: http://www.4launch.nl/shop/#p-4-productid-106912. Je kan klikken op omschrijving, tell a friend, etc. De inhoud van de tabel veranderd aan de hand van de menu items.
Dit geheel kan met Jquery.
Op internet zijn kant en klante scripts te vinden in jquery om dit te doen. Echter ben ik dan gebonden aan de kant en klare layout.
Ik wil dus een dergelijke tabel, maar dan in mijn eigen style. Dus kleuren en opmaak zoals mijn website.
Ook transip gebruikt het.
https://www.transip.nl/domeinnaam-en...ng/domeinnaam/ rechts bovenaan: Snel en Geavanceerd.
Zoals je ook bij transip ziet is dit in hun style. de knoppen met Snel en Geavanceerd hebben de kleuren van Transip. De achtergrond en lijn van de tabel ook.

Ik kan even geen voorbeeld van de layout laten zien, maar dat moet niet zo belangrijk zijn.

Ik ga de tabel op meerder pagina's gebruiken. Het moet dus zo zijn dat ik het scriptje/design wel makkelijk kan weergebruike op andere pagina's. Dus de "menu knoppen" in de tabel kan aanpassen. Dus moeten 2 knoppen kunnen zijn, maar bijvoorbeeld ook 4.

Het lijkt mij een simpel klusje voor iemand die goed is met jquery en CSS.
Tabel komt over hele breedte van het content vlak.

Graag prijs vermelden of doorgeven, en anders richtprijs. Dan kan ik daarna het design laten zien en kunnen we tot een overeenkomst komen.

Voor de duidelijkheid: IK ben niet opzoek naar een website design, geen complete website, geen CMS, of whatever. Enkel dus de dynamische tabel.

Ik denk dat je hier een heel eind mee komt: http://jqueryui.com/

Heeft een eigen theme editor

Beste Marijn

Wij van HDA ICT hebben ruime ervaring in jQuery UI en alle modules

Graag willen wij met u in contact komen, om uw project door te spreken

Graag horen wij van u

Met vriendelijke groet,
Dhr. M Meijer
HDA ICT
06 11 720 391

Nou, jullie eigen site ziet er niet eens fatsoenlijk uit... laat staan dat je met jQuery iets moois kan maken maar goed.

Op jQuery en Google staan 100e voorbeelden die je kan kopieren en plakken, super makkelijk!
Geen geld aan besteden, vanavond één uurtje er voor gaan zitten en je hebt het werkend.

http://jqueryui.com/demos/tabs/


Als je 100% eigen controle wilt gebruik dit:

HTML

Code:

<ul class="tabs">     <li><a href="#tab1">Gallery</a></li>     <li><a href="#tab2">Submit</a></li> </ul>  <div class="tab_container">     <div id="tab1" class="tab_content">         <!--Content-->     </div>     <div id="tab2" class="tab_content">        <!--Content-->     </div> </div>

CSS

Code:

ul.tabs { 	margin: 0; 	padding: 0; 	float: left; 	list-style: none; 	height: 32px; /*--Set height of tabs--*/ 	border-bottom: 1px solid #999; 	border-left: 1px solid #999; 	width: 100%; } ul.tabs li { 	float: left; 	margin: 0; 	padding: 0; 	height: 31px; /*--Subtract 1px from the height of the unordered list--*/ 	line-height: 31px; /*--Vertically aligns the text within the tab--*/ 	border: 1px solid #999; 	border-left: none; 	margin-bottom: -1px; /*--Pull the list item down 1px--*/ 	overflow: hidden; 	position: relative; 	background: #e0e0e0; } ul.tabs li a { 	text-decoration: none; 	color: #000; 	display: block; 	font-size: 1.2em; 	padding: 0 20px; 	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ 	outline: none; } ul.tabs li a:hover { 	background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/ 	background: #fff; 	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ }

.tab_container { 	border: 1px solid #999; 	border-top: none; 	overflow: hidden; 	clear: both; 	float: left; width: 100%; 	background: #fff; } .tab_content { 	padding: 20px; 	font-size: 1.2em; }

jQuery

Code:

$(document).ready(function() {  	//When page loads... 	$(".tab_content").hide(); //Hide all content 	$("ul.tabs li:first").addClass("active").show(); //Activate first tab 	$(".tab_content:first").show(); //Show first tab content  	//On Click Event 	$("ul.tabs li").click(function() {  		$("ul.tabs li").removeClass("active"); //Remove any "active" class 		$(this).addClass("active"); //Add "active" class to selected tab 		$(".tab_content").hide(); //Hide all tab content  		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 		$(activeTab).fadeIn(); //Fade in the active ID content 		return false; 	});  });

pas de CSS aan en je hebt 100% je eigen tabs.

Succes ermee!