Dropdown Menü anpassen

**passel** · 07.01.2012 01:29

Hey Leute,

Ich stehe vor einem kleinen Hindernis und zwar:

Ich möchte ein Dropdown Menü in meine neue Webseite einbinden, dass Template habe ich auch selbst erstellt.

Meine Frage ist nun: Wie schaffe ich es nun damit es so aus sieht wie ich es gerne hätte? :-)

Fettes dankeschön schonmal! :-)

Mein jetziges Problem sieht so aus: (fals es relevant ist: Ich include das menü in die index.php)

bild.jpg

Wie ihr seht sollten eigentlich die Punkte - Startseite, Joomla im Überlick, Joomla Lizenz und die beiden andere darunter liegende Punkte, in der Reihe (oben in dem grauen Balken) wo auch z.Z. Desktop steht, stehen.

Leider funktioniert es nicht so wie ich es gerne haben möchte, und zwar so möchte ich es haben:
(reines HTML, nicht an Joomla angepasst)
bild2.jpg

Das ist mein jetziger Code mit dem mein Fehler auftritt:

PHP-Code:


<!--[START-QM0]--><ul id="qm0" class="qmmc">





    <li><a class="qmparent" href="javascript:void(0)">desktop</a>



        <?php if ($this->countModules('user3')): ?>

        <jdoc:include type="modules" name="user3" />

        <?php endif; ?>





       <li class="qmclear">&nbsp;</li></ul>



<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: 'all' * 'all-always-open' * 'main' * 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->

<script type="text/javascript">qm_create(0,false,400,250,false,false,false,false,false);</script><!--[END-QM0]-->

Das hier ist der HTML Code wie es richtig dargestellt wird:

HTML-Code:

<!--[START-QM0]--><ul id="qm0" class="qmmc">

	<li><a class="qmparent" href="javascript:void(0)">desktop</a>

		<ul style="box-shadow:0px 0px 20px rgb(51, 51, 51);">
		<li><a href="javascript:void(0)">features</a></li>
		<li><a href="javascript:void(0)">security</a></li>
		<li><a href="javascript:void(0)">performance</a></li>
		<li><a href="javascript:void(0)">customization</a></li>
		<li><a href="javascript:void(0)">technology</a></li>
		<li><a href="javascript:void(0)">videos</a></li>
		<li><a href="javascript:void(0);">tour</a></li>
		<li><a href="javascript:void(0);">future releases</a></li>
		</ul></li>

	<li><a class="qmparent" href="javascript:void(0)">mobile</a>

		<ul>
		<li><a href="javascript:void(0)">download</a></li>
		<li><a href="javascript:void(0)">features</a></li>
		<li><a href="javascript:void(0)">customize</a></li>
		<li><a href="javascript:void(0)">sync</a></li>
		<li><a href="javascript:void(0)">develop</a></li>
		<li><a href="javascript:void(0)">get involved</a></li>
		<li><a href="javascript:void(0);">faq</a></li>
		<li><a href="javascript:void(0);">blog</a></li>
		<li><a href="javascript:void(0);">videos</a></li>
		<li><a href="javascript:void(0);">future releases</a></li>
		</ul></li>

	<li><a class="qmparent" href="javascript:void(0)">add-ons</a>

		<ul>
		<li><a href="javascript:void(0)">firefox add-ons</a></li>
		<li><a href="javascript:void(0)">featured add-ons</a></li>
		<li><a href="javascript:void(0)">extensions</a></li>
		<li><a href="javascript:void(0)">themes</a></li>
		<li><a href="javascript:void(0)">personas</a></li>
		<li><a href="javascript:void(0)">search tools</a></li>
		<li><a href="javascript:void(0);">language support</a></li>
		<li><a href="javascript:void(0);">collection</a></li>
		<li><a href="javascript:void(0);">mobile add-ons</a></li>
		<li><a href="javascript:void(0);">developer hub</a></li>
		</ul></li>

	<li><a class="qmparent" href="javascript:void(0)">support</a>

		<ul>
		<li><a href="javascript:void(0)">firefox support</a></li>
		<li><a href="javascript:void(0)">mobile support</a></li>
		<li><a href="javascript:void(0)">thunderbird support</a></li>
		</ul></li>

	<li><a class="qmparent" href="javascript:void(0);">about</a>

		<ul>
		<li><a href="javascript:void(0);">about firefox</a></li>
		<li><a href="javascript:void(0);">join mozilla</a></li>
		<li><a href="javascript:void(0);">participate</a></li>
		<li><a href="javascript:void(0);">press center</a></li>
		<li><a href="javascript:void(0);">brand toolkit</a></li>
		<li><a href="javascript:void(0);">careers</a></li>
		<li><a href="javascript:void(0);">partnership</a></li>
		<li><a href="javascript:void(0);">legal</a></li>
		<li><a href="javascript:void(0);">contact us</a></li>
		<li><a href="javascript:void(0);">blog</a></li>
		</ul></li>

<li class="qmclear">&nbsp;</li></ul>

<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click (options: 'all' * 'all-always-open' * 'main' * 'lev2'), Right to Left, Horizontal Subs, Flush Left, Flush Top) -->
<script type="text/javascript">qm_create(0,false,400,250,false,false,false,false,false);</script><!--[END-QM0]-->

Und hier ist die dazugehörige CSS Datei:

HTML-Code:

@charset "utf-8";
/* CSS Document */



/*[START-QCC]*/
.qmmc .qmdivider{
	display:block;
	font-size:1px;
	border-width:0px;
	border-style:solid;
	position:relative;
	z-index:1;
}

.qmmc .qmdividery{
	float:left;
	width:0px;
}

.qmmc .qmtitle{
	display:block;
	cursor:default;
	white-space:nowrap;
	position:relative;
	z-index:1;	
}

.qmclear {
	font-size:1px;
	height:0px;
	width:0px;
	clear:left;
	line-height:0px;
	display:block;
	float:none !important;
}

.qmmc {
	position:relative;
	zoom:1;
}

.qmmc a, .qmmc li {
	float:left;
	display:block;
	white-space:nowrap;
	position:relative;
	z-index:1;
}

.qmmc div a, .qmmc ul a, .qmmc ul li {
	float:none;
	
}

.qmsh div a {
	float:left;
	
}

.qmmc div{
	visibility:hidden;
	position:absolute;
}

.qmmc .qmcbox{
	cursor:default;
	display:inline-block;
	position:relative;
	z-index:1;
}

.qmmc .qmcbox a{
	display:inline;
	
}

.qmmc .qmcbox div{
	float:none;
	position:static;
	visibility:inherit;
	left:auto;
}

.qmmc .qmmulti{
	float:left;
	position:relative;
	}
	
.qmmc .qmmulti dd{
	margin:0px;
	padding:0px;
}

.qmmc dd {
	position:relative;
}

.qmmc .qmml0 {
	z-index:99;
}

.qmmc .qmml1 {
	z-index:98;
}

.qmmc .qmml2 {
	z-index:97;
}

.qmmc .qmml3 {
	z-index:96;
}

.qmmc .qmml4 {
	z-index:95;
}

.qmmc .qmml5 {
	z-index:94;
}

.qmmc .qmml6 {
	z-index:93;
}

.qmmc .qmml7 {
	z-index:92;
}

.qmmc .qmml8 {
	z-index:91;
}

.qmmc .qmml9 {
	z-index:90;
}

.qmmc li {
	z-index:auto;
}

.qmmc ul {
	visibility:hidden;
	position:absolute;
	z-index:10;
}

.qmmc, .qmmc ul, .qmmc dl {
	list-style:none;
	padding:0px;
	margin:0px;
}

.qmmc li a {
	float:none;
	
}

.qmmc li:hover>ul{
	visibility:inherit;
	left:auto;
	
}

/*[END-QCC]*//*[START-QCC0]*/

#qm0 ul {
	top:100%;
	
}

#qm0 ul li:hover>ul{
	visibility:inherit;
	top:0px;
	left:100%;
	
}

#qm0 ul dd:hover>ul{
	visibility:inherit;
	top:0px;
	left:100%;
	
}

#qm0 {
	z-index:9999999;
}

/*[END-QCC0]*/


/*!!!!!!!!!!! QuickMenu Styles !!!!!!!!!!!*/


	/* QuickMenu 0 */

	/********* (MAIN) Container*********/	
	#qm0	
	{	
		width:auto;
		background-color:transparent;
		
	}


	/********* (MAIN) Items*********/	
	#qm0 a	
	{	
		padding:15px 30px 15px 30px;
		background-color:transparent;
		color:#313131;
		font-family:Arial;
		font-size:14px;
		text-decoration:none;
		font-weight:bold;
		text-align:left;
		font-variant:small-caps;
		border-width:0px 0px 0px 1px;
		border-style:solid;
		border-color:#b2b2b2;
		
	}



	/********* (MAIN) Active State*********/	
	body #qm0 .qmactive, body #qm0 .qmactive:hover	
	{	
		z-index:100;
		background-color:#FFFFFF;
		
	}


	/********* (SUB) Container*********/	
	#qm0 div, #qm0 ul	
	{	
		margin:-1px 0px 0px;
		border-width:0px;
		border-style:solid;
		border-color:#666666;
		background-color:#ec8312;
		border-radius:7px 7px 7px 7px;-moz-border-radius:7px 7px 7px 7px;-webkit-border-radius:7px 7px 7px 7px;-ms-border-radius:7px 7px 7px 7px;-o-border-radius:7px 7px 7px 7px;-khtml-border-radius:7px 7px 7px 7px;
	   -webkit-box-shadow: 0px 0px 20px #000;
   -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
	}


	/********* (SUB) Column*********/	
	#qm0 div .qmmulti, #qm0 ul .qmmulti	
	{	
		padding:10px;
	}


	/********* (SUB) Items*********/	
	#qm0 div a, #qm0 ul a	
	{	
		padding:5px 80px 5px 10px;
		
		color:#fff;
		font-size:13px;
		font-weight:normal;
		border-width:1px 0px;
		border-style:solid;
		border-color:transparent;
		border-radius:7px 7px 7px 7px;-moz-border-radius:7px 7px 7px 7px;-webkit-border-radius:7px 7px 7px 7px;-ms-border-radius:7px 7px 7px 7px;-o-border-radius:7px 7px 7px 7px;-khtml-border-radius:7px 7px 7px 7px;
		
	}


	/********* (SUB) Hover State*********/	
	#qm0 div a:hover	
	{	
		background-color:rgba(102, 102, 102, 0.5);
		border-color:#ec8312;
	}


	/********* (SUB) Hover State - (duplicated for pure CSS)*********/	
	#qm0 ul li:hover>a, #qm0 ul dd:hover>a	
	{	
		background-color:rgba(223, 223, 223, 0.5);
		border-color:#fff;
	}


	/********* (SUB) Active State*********/	
	body #qm0 div .qmactive, body #qm0 div .qmactive:hover	
	{	
		background-color:rgba(223, 223, 223, 0.5);
		border-color:#fff;
	}


	/********* Individual Titles*********/	
	#qm0 .qmtitle	
	{	
		cursor:default;
		padding:5px 0px 5px 4px;
		background-color:rgba(143, 142, 142, 0.5);
		color:#313131;
		font-family:Arial;
		font-size:11px;
		font-weight:bold;
		font-variant:small-caps;
		border-width:0px 0px 1px;
		border-style:solid;
		border-color:#666666;
	}


	/********* Individual Horizontal Dividers*********/	
	#qm0 .qmdividerx	
	{	
		border-top-width:1px;
		border-color:#666666;
	}


	/********* Individual Vertical Dividers*********/	
	#qm0 .qmdividery	
	{	
		border-left-width:1px;
		height:15px;
		margin:4px 2px 0px;
		border-color:#555555;
	}


	/*[END-QS0]*/


</style>

Rumburack · 07.01.2012 09:14

*einfach mal gelöscht*

**passel** · 07.01.2012 10:30

Hey...

Verstehe deine erste Frage nicht ganz - Was genau ist denn an Bord? bzw. wo ist jetzt der Fehler den ich mache?

Joomla benutzte ich, weil ich damit eigentlich ganz gut umgehen kann!

Rumburack · 07.01.2012 11:28

*einfach mal gelöscht*

**passel** · 07.01.2012 11:52

Ja das es Menüerweiterungen gibt weiß ich auch.
Aber ich möchte halt mein Menü benutzen, Du sagtest ja das man meine CSS auch nehmen kann. Und genau das ist ja mein Problem, was ich gerne gelöst haben möchte.

Wie lasse ich das alles so anzeigen wie ich es gerne hätte?- Mehr möchte ich ja nicht wissen!

Rumburack · 07.01.2012 11:55

*einfach mal gelöscht*

**passel** · 07.01.2012 12:01

Vielen Vielen Dank...

Habe mein problem gelöst bekommen

Thema: Dropdown Menü anpassen

LinkBack

Themen-Optionen

Thema durchsuchen

Anzeige

Dropdown Menü anpassen

Erhielt Danksagungen von:

Lesezeichen

Lesezeichen

Berechtigungen