WinFuture-Forum.de: Css Menü Anpassen: Transparenz Und Runde Recken - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Css Menü Anpassen: Transparenz Und Runde Recken


#1 Mitglied ist offline   CrazyLexx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 337
  • Beigetreten: 20. Januar 05
  • Reputation: 0

geschrieben 02. März 2008 - 13:20

Hallo zusammen,

verwende ein CSS basiertes Script für ein Dropdown-Menü und möchte dieses nun an das neue Design der Seite anpassen. Dazu möchte ich gerne die Untermenüs transparent machen und mit runden Ecken versehen. Kennt sich hier jemand entsprechend gut mit CSS aus und kann mich auf die entsprechenden Änderungen hinweisen, die ich vornehmen muss?

Hier mal das Script:

.preload1 {background: url(six_0a.gif);}
.preload2 {background: url(six_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:13px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#fff; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span, 
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}

#nav :hover ul.sub
{left:1px; top:38px; background: #a5a4a9; padding:10px; border:1px solid #FFFFFF; white-space:nowrap; width:150px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:auto; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:14px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#FFFFFF; text-decoration:none;border:1px solid #a5a4a9;}
#nav li ul.sub li a.fly
{background:#a5a4a9 url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover 
{background:#fec009; color:#fff; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#fec009 url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:13px; font-weight:bold; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#444444; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:10px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul, 
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #a5a4a9; padding:10px; border:1px solid #FFFFFF; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul 
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#FFFFFF;} 
#nav li:hover li:hover > li a.fly
{background:#a5a4a9 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#FFFFFF;}


Und so wird das Menü dann im Code aufgerufen:

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
	<li class="top"><a href="#nogo1" class="top_link"><span>START</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">ARTIKEL</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><b>Cameras</b></li>
			<li><a href="#nogo3" class="fly">nach NAME<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
					<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><b>Zoom</b></li>
						<li><a href="#nogo12">35mm to 125mm</a></li>
						<li><a href="#nogo13">50mm to 250mm</a></li>
						<li><a href="#nogo14">125mm to 500mm</a></li>
						<li><b>Non standard</b></li>
						<li><a href="#nogo17">Bayonet mount</a></li>
						<li><a href="#nogo18">Screw mount</a></li>
					</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><b>Accessories</b></li>
			<li><a href="#nogo19">Flash Guns</a></li>
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
					<li><b>European</b></li>
					<li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
						<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
							<li><b>City</b></li>
							<li><a href="#nogo35">London</a></li>
							<li><a href="#nogo36">Liverpool</a></li>
							<li><a href="#nogo37">Glasgow</a></li>
							<li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
								<!--[if lte IE 6]><table><tr><td><![endif]--><ul>
									<li><b>District</b></li>
									<li><a href="#nogo39">Redland</a></li>
									<li><a href="#nogo40">Hanham</a></li>
									<li><a href="#nogo41">Eastville</a></li>
								</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
							</li>
							<li><a href="#nogo42">Cardiff</a></li>
							<li><a href="#nogo43">Belfast</a></li>
						</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
					</li>
					<li><a href="#nogo44">French</a></li>
					<li><a href="#nogo45">German</a></li>
					<li><a href="#nogo46">Spanish</a></li>
					<li><b>Worldwide</b></li>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="#nogo49">Buying</a></li>
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>


EDIT: Hier mal noch fix eine Vorschau von dem Menü - vielleicht kann man es sich dann besser vorstellen:
Vorschau

Dieser Beitrag wurde von CrazyLexx bearbeitet: 02. März 2008 - 14:43

0

Anzeige



Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0