css нещо като drop down меню

our

Registered
Добре ми върви ученето на css... :)

Интересува ме следното сега. Имаме едно меню
Код:
Линк 1
Линк 2
Линк 3

И да речем след кликване на Линк 2 да стане

Код:
Линк 1
Линк 2
       Подлинк 1
       Подлинк 2
       Подлинк 3
Линк 3

Мога да го направя, ама ... ама с $_GET :D

Може ли да стане с цсс и на какъв принцип ...
 
<ul> и <ol> със hide! Т.е. със Списъци! и например задаваш като се цъкне на него (някой линк както ти каза Линк 2) и да се появява 2 списък !
 
Намерих едно меню ама не точно което искаш но ето за какво става дума със това hide:
Код:
      .adxmhover ul,
      .adxmhover .adxmhover ul {
      visibility: visible;
      }
     .adxmhover li ul,
      .adxmhover .adxmhover li ul {
      visibility: hidden;
      }
Ето ти менюто:
http://www.aplus.co.yu/adxmenudev/adxmenu-v4-flyout-drop-down-menu/
Ако ти трябва! Ама не е точно това което искаш! Мисля че имаше това което искаш ама беше със JS защото няма как да избуташ единия линк и да се замести със Подлинковете без JS! Ще го потърся!

Едит:// Ето още едно ей сега ще го пробвам май е такова!:
http://www.breakingpar.com/bkp/home.nsf/0/87256B280015193F87256F7B0062FD99
 
@luuudman - там въобще няма такова меню, или при мене не работи.
Това ми е идеята сега, ама не работи (не съм я доразвил).
Код:
<style>
 child { display: none; }
 .parent:hover child { display: block; }
</style>
 <span class="parent">Menu1
  <span class="child">
  1<br />
  2<br />
  </span>
 </span>
  <span class="parent">Menu2
  <span class="child">
  3<br />
  4<br />
  </span>
 </span>
-----------------------------------------------------
А това работи:
page.html
Код:
<html>
 <head>
  <title>menu</title>
  <script type="text/javascript" src="menu.js">
  </script>
  <link rel="stylesheet" type="text/css" href="style1.css" />
 </head>
 <body>
  <table border="1">
   <tr>
    <td class="mh" onmouseover="javascript: show('box1');" onmouseout="javascript: hide('box1');">Menu 1<br />
     <span id="box1" class="menu">
       <div class="elem">e1</div>
       <div class="elem">e2</div>
       <div class="elem">e3</div>
	  </span>
    </td>
   </tr>
  </table>
	text text text text text text text text text text text text text text text text text<br />  
	text text text text text text text text text text text text text text text text text<br />  
	text text text text text text text text text text text text text text
 </body>
</html>

menu.js
Код:

style1.css
Код:
body { color: #227799; z-index: 1; background-color: black; font-family: 'courier new'; font-size: 14pt }
table { border: 1px; }

a:link { color: #229977; text-decoration: none }
a:visited { color: #229977; text-decoration: none }
a:hover { color: #66BBDD; background-color: #0000FF; text-decoration: underline }

.mh { color: #cdcdcd; font-family: 'courier new'; font-size: 16px; font-weight: 800; cursor: default; }
.menu { display: none; z-index: 10; position: absolute; background-color: #006633; cursor: pointer; border-bottom: 5px; }
.menu div:hover { color: #6699cc; background-color: #003366; text-decoration: underline; }
.elem { width: 50px; }
 
Ето намерих менюто!:
http://f1r3fl3x.freehostia.com/register.php Виж отляво! Ей сега ще дам сорса!

ЕДИТ:// Ето сорса:
Код:
<script type="text/javascript">
var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	
	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;	
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='dhtmlgoodies_answer_content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}		
	}	
}
window.onload = initShowHideDivs;
</script>
<div id="dhtmlgoodies_q1" class="dhtmlgoodies_question">1</div>
<div style="display: block; height: 74px; visibility: visible;" id="dhtmlgoodies_a1" class="dhtmlgoodies_answer">
	<div id="dhtmlgoodies_ac1" class="dhtmlgoodies_answer_content" style="top: 0px;">
<a href="http://f1r3fl3x.freehostia.com/games/games.php?cathegory=action&page=0">1.1</a><br>
<a href="http://f1r3fl3x.freehostia.com/games/games.php?cathegory=arcade&page=0">1.2</a><br>
<a href="http://f1r3fl3x.freehostia.com/games/games.php?cathegory=sport&page=0">1.3</a><br>
<a href="http://f1r3fl3x.freehostia.com/games/games.php?cathegory=strategy&page=0">1.4</a>
	</div>
</div>
И бачка!
 
Отиди на първият пост и виж пак какво иска човекът.
Ето демо на моят код: http://web-tourist.net/project/datamatrix/_menu_test.html
 
Ето виж ти какво иска!(не ти се ядосвам, не ти викам :wink:)
И да речем след кликване на Линк 2 да стане
Той иска СЛЕД като се кликне и да стане така! Кликни на "Игри" във сайта дето дадох и ще го видиш :wink: :lol:
 
Ааа извинявам се, бачка и под ФФ.
Е мерси много luudman ;)

datamatrix 10x за помощта ;)

PS : datamatrix доразвии онова което каза, че не си. Струва ми се интересно.
 

Back
Горе