Forum elektroda.pl

Regulamin  | Punkty  | Dodaj...  | Ostatnie  | Szukaj  | Rejestracja  | Zaloguj

Ta strona używa cookie. Dowiedz się więcej o celu ich używania i zmianie ustawień cookie w przeglądarce.
Korzystając ze strony wyrażasz zgodę na używanie cookie, zgodnie z aktualnymi ustawieniami przeglądarki.

html/css - podmenu zmieniające wyświetlane divy


Napisz nowy temat  Odpowiedz do tematu      Strona Główna -> Forum elektroda.pl -> Programowanie Ogólne -> html/css - podmenu zmieniające wyświetlane divy
Autor
Wiadomość
uzytkownik78
Poziom 13
Poziom 13


Dołączył: 13 Maj 2011
Posty: 144

Post#1 Post autora tematu 15 Sty 2014 01:05   

html/css - podmenu zmieniające wyświetlane divy


chodzi o zrobienie menu na stronie a dokładniej jest to cms który ma możliwość edycji podstron w html

więc mamy 3 grupy tekstów i 3 opcje menu

menu po wybraniu ujawniają tekst nalezący do danego menu (overflow:hidden)


niestety nei wiem teraz jak to zrobić lub znaleźć

html/css - podmenu zmieniające wyświetlane divy
Powrót do góry
   
Google


Google Adsense


Post# 15 Sty 2014 01:05   





Powrót do góry
   
the_fifth_horseman
Poziom 22
Poziom 22


Dołączył: 11 Maj 2007
Posty: 2135
Miasto: Opole

Post#2 15 Sty 2014 12:37   

Re: html/css - podmenu zmieniające wyświetlane divy


Tobie nie chodzi o menu a o zakładki. Dwie różne rzeczy.
Akurat grzebałem nad czymś takim na podstawie paru przykładów w sieci.
Jest kilka różnych sposobów na rozwiązanie tego - zamieszczony kod używa tylko HTML i CSS.
Kod PHP - [rozwiń]
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<?php
require_once('TabGroup.class.php');
$Group=new TabGroup();
$Group[0]="Numeric tab test";
$Group->tab1="First tab test";
$Group['tab2']="Second tab test";
$Group['tab3']=array('title'=>'Third Tab', 'content'=>"third tab test");
$Group['Tab Four']=array('Line 1', 'line 2', 'line 3');
$Group->printHtml();
?>
</body>
</html>

TabGroup.class.php:
Kod PHP - [rozwiń]
<?php
class TabGroup implements arrayaccess {
 
private $tabs = array();
 
public function __get ( $name )
{
if ($name=='tabs')
return $this->tabs;
else
return $this->offsetGet($name);
}
 
public function __set( $name , $value )
{
if ($name=='tabs' && is_array($value))
$this->tabs=$value;
else
return $this->offsetSet($name, $value);
}
 
public function __isset ( $name )
{
if ($name=='tabs')
return isset($this->tabs);
else
return $this->offsetExists($name);
}
public function __unset ( $name )
{
if ($name=='tabs')
unset($this->tabs);
else
$this->offsetUnset($name);
}
public function __toString()
{
ob_start();
$this->printHtml();
$res=ob_get_contents();
ob_end_clean();
return $res;
}
public function offsetExists($offset) {
return isset($this->tabs[$offset]);
}
public function offsetUnset($offset) {
unset($this->tabs[$offset]);
}
public function offsetGet($offset) {
return isset($this->tabs[$offset]) ? $this->container[$offset] : null;
}
public function offsetSet( $offset , $value )
{
$this->tabs[$offset]=$value;
}
public function printHtml()
{
?><ul class="tabs"><?php
$this->firstTab=true;
array_walk($this->tabs, array($this, 'printTab'));
?></ul><?php
}
private function printTab (&$tab, $index)
{
if (is_array($tab) && array_key_exists('title', $tab) && array_key_exists('content', $tab))
{
$index=htmlentities($index);
?>
<li>
<input type="radio" <?=isset($this->firstTab)?'checked':''?> name="tabs" id="tab-<?=$index?>">
<label for="tab-<?=$index?>"><?=$tab['title']?></label>
<div id="tab-content-<?=$index?>" class="tab-content animated fadeIn">
<?=$tab['content']?>
</div>
</li>
<?php
unset($this->firstTab);
}
else
{
if ( is_array($tab) )
$tab=implode('<br/>',$tab);
$r=array('content'=>$tab);
if (is_int($index))
$r['title']="Tab ".($index+1);
else
$r['title']=$index;
$this->printTab ($r, $index);
}
}
}
?>

style.css:
Kod CSS - [rozwiń]
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}
 
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
/* border-radius: 2px 2px 0 0;*/
border-radius: 5px 5px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Roboto', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
/*-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;*/

transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
 
[id^=tab]:checked + label {
background: #08C;
color: white;
top: 0;
}
 
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
 
[id^=tab]:not(:checked) +label {
box-shadow:2px 2px 2px 2px rgba(127,127,127,0.5) inset;
}
 
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
/*padding-top: 10px;*/
background: #08C;
padding: 15px;
color: white;
position: absolute;
/*top: 53px;*/
left: 0;
box-sizing: border-box;/*
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;*/

animation-duration: 0.5s;
}
 

Powrót do góry
   
Google


Google Adsense


Post# 15 Sty 2014 12:37   





Powrót do góry
   
uzytkownik78
Poziom 13
Poziom 13


Dołączył: 13 Maj 2011
Posty: 144

Post#3 Post autora tematu 17 Sty 2014 10:34   

Re: html/css - podmenu zmieniające wyświetlane divy


css responsive slider działa świetnie ale dziękuję za pomoc
Powrót do góry
   
Napisz nowy temat  Odpowiedz do tematu      Strona Główna -> Forum elektroda.pl -> Programowanie Ogólne -> html/css - podmenu zmieniające wyświetlane divy
Strona 1 z 1
Podobne tematy
[HTML lub CSS] Symulacja Menu Start w HTML-u (23)
Vba Excel - Makro wyszukujące tagi html i zmieniające ich formatowanie (1)
Zmodyfikowane fonty w html z css (6)
html + css Jak to połączyć (1)
HTML i CSS: Przerwa między ramkami (7)
Znacznik <img src> html->css (8)
[HTML/CSS] Nieruchome obrazki na stronie (3)
[html+css] Odnośniki - nieprawodłowe działanie (2)
CSS/HTML - Niescisłosci w rozwijanym menu ... (8)
HTML - Tabela vs klasa vs ID i do tego CSS (2)


Administrator || Moderatorzy || Regulamin forum || Regulamin ogólny || Informacja o cookies || Reklama || Kontakt

Page generation time: 0.255 seconds

elektroda.pl temat RSS