Bármi kérdésed van a témával kapcsolatban, vagy hibát észleltél akkor itt közöld. :)
hali, nagyon szép leírás, én sokat tanultam belőle, de a kérdésem a következő;
lesz még css-ről tutorial?::)
Lesz lesz, lehet holnap délelőtt folytatom is, csak az elmúlt hetekben elég sok dolgom volt. :)
Mindenképp folytatni fogom. :)
az szuper! köszi ::) :D
http://translate.googleusercontent.com/translate_c?hl=hu&sl=en&u=&prev=/search%3Fq%3D%26hl%3Dhu%26client%3Dfirefox-a%26hs%3Dmmi%26rls%3Dorg.mozilla:hu:official%26prmd%3Divns&rurl=translate.google.hu&twu=1&usg=ALkJrhjYipXeDJG5W5Td5jyfVxLGez_nKw (http://translate.googleusercontent.com/translate_c?hl=hu&sl=en&u=&prev=/search%3Fq%3Dw%26hl%3Dhu%26client%3Dfirefox-a%26hs%3Dmmi%26rls%3Dorg.mozilla:hu:official%26prmd%3Divns&rurl=translate.google.hu&twu=1&usg=ALkJrhjYipXeDJG5W5Td5jyfVxLGez_nKw)
Üdv.: Senki
Előre is bocsánatot kérek, egy elég hülyeség ötlött meg a fejemben munka után, sikerült is megvalósítanom, de szerintem ennek van egyszerűbb módja is.
html + css menu az alap
Láthatunk menüket ugye amik bal oldalon találhatóak és az almenük jobbra jönnek elő. Link (http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/)
Hülyeségből elkezdtem átalakítani. Konkrétan az ötlet az volt hogy letükrözöm. ( Jobb oldalon helyezkedik el a menü, és az almenük bal oldalra nyílnak ki belőle. )
Sikerült is, a kérés az lenne hogy van egyszerűbb módszer?
( Azért kérdezem mert 1 HTML oldalon lenne egymással szemben a két menü, külön tartalommal, és egy css fájlt szeretnék amiben az összes style benne van, ide zsúfolnám be ezt is. )
Mindenhol megtalálható alapértelmezett menü:
Css:
#menu {
width: 90px;
background: #eee;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
Html:
<div id="menu">
<ul>
<li><h2>Haliho</h2>
<ul>
<li><a href="#" title="1">1</a>
<ul>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
<li><a href="#" title="4">4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>csa</h2>
<ul>
<li><a href="#" title="5">5</a></li>
<li><a href="#" title="6">6</a>
<ul>
<li><a href="#" title="7">7</a>
<ul>
<li><a href="#" title="8">8</a></li>
<li><a href="#" title="8">8</a></li>
<li><a href="#" title="8">8</a></li>
<li><a href="#" title="8">8</a></li>
<li><a href="#" title="8">8</a></li>
<li><a href="#" title="8">8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><h2>waaaaaa</h2>
<ul>
<li><a href="#" title="9">9</a></li>
<li><a href="#">9</a>
<ul>
<li><a href="#" title="9">9</a>
<ul>
<li><a href="#" title="9">9</a></li>
<li><a href="#" title="9">9</a></li>
<li><a href="#" title="9">9</a></li>
<li><a href="#" title="9">9</a></li>
<li><a href="#" title="9">9</a></li>
<li><a href="#" title="9">9</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Az általam alakítottban 2 változás történt a Css-ben:
#menu1 ul {
position: relative;
right: -180px;
list-style: none;
margin: 0;
padding: 0;
}
és kapott egy új dolgot:
#menu1 ul li {
position: relative;
right: 180px;
}
A div-ek miatt változott a név " menu1 "-re!
HTML-ben pedig a div id " menu1 " lett.
Üdv.: Senki