# Menübreite anpassen und Items in Submenü verschieben wenn Breite nicht gegeben



## Purdey (10. Oktober 2012)

Hallo ich bin auf der Suche nach einer bestimmen Menüfunktionalität:

Und zwar soll ähnlich dem PHPMYADMIN Menü das Menü solange horizontal dargestellt werden wie die Elemente in der Auflösung darstellbar sind, ist dies durch Verkleinerung des Fensters oder der Auflösung nicht mehr gegeben so sollten die später nicht sichtbaren Menüpunkte ins Dropdown wandern.

Anbei zwei Beispiele:








Ich hoffe Ihr könnt mir helfen.


----------



## Carrear (10. Oktober 2012)

Erkundige dich mal zum Thema Responsive Designs und Media Queries, ich denke da liegt die Lösung. Du kannst je nach Ausgabebreite in Pixeln unterschiedliche CSS Angaben für Elemente festelegen.


----------



## Purdey (10. Oktober 2012)

Ja soweit ist mir das bewusst nur die Frage ist wie lasse ich die elemente in ein submenü (dropdown) springen wie abgebildet.


----------



## Carrear (10. Oktober 2012)

ja wie gesagt  media queries und dann die darstellung der liste ändern


----------



## Purdey (10. Oktober 2012)

ich kann mir aber nicht vorstellen wie das gehen soll wird die Liste dann in der Menge einfach beschnitten? weil ich kann ja nach 3 Einträgen abschneiden aber

3 Einträge können kurz oder lang seien

a | b | c 

sein aber auch 

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa | bbbbbbbbbbbbbbbbbbbbbbbbbbb | ccccccccccccccccccccccccc 

Weißt du worauf ich hinaus will?


----------



## Carrear (10. Oktober 2012)

Ahja, jetzt verstehe ich erst richtig was du willst. Es sah in so klein aus wie ein Untermenü. Ich hätte da ne Idee.

Du könntest deinen einzelnen Menüelementen Klassen zuweisen. Darüber könntest du dann die Breite mit JS auslesen und addieren und dann nach und nach angeben, ab welcher Pixelbreite des umgebenden Containers jeder einzelne Menüpunkt in dem normalen Menü auf display none und im Dropdown auf Display: block gestellt wird. Verstehste?


----------



## Purdey (10. Oktober 2012)

Ah sorry da habe ich mich wohl bissl schwierig ausgedrückt.

Grob verstanden habe ich es.

Kannst du vielleicht ein kleines Beispiel geben?


----------



## Carrear (10. Oktober 2012)

Schematisch gerne.



```
<menuecontainer>
	<hauptmenü>
		<Elementeins />
		<Elementzwei/>
		<Elementdrei/>
	</hauptmenü>
	<dropdownmenü>
		<Elementeins />
		<Elementzwei/>
		<Elementdrei/>
	</dropdownmenü>
</menuecontainer>

variable breiteElementeins = breite(Elementeins);
variable breiteElementzwei = breite(Elementzwei);
variable breiteElementdrei = breite(Elementdrei);

function Menüresize{
	if(breite(Menuecontainer) < breiteElementeins + breiteElementzwei + breiteElementdrei) {
		hauptmenü>Elementdrei.css('display','none');
		dropdownmenü>Elementdrei.css('display','block');
	}
	
	if(breite(Menuecontainer) < breiteElementeins + breiteElementzwei) {
		hauptmenü>Elementzwei.css('display','none');
		dropdownmenü>Elementzwei.css('display','block');
	}
	
	if(breite(Menuecontainer) < breiteElementeins ) {
		hauptmenü>Elementeins.css('display','none');
		dropdownmenü>Elementeins.css('display','block');
	}
}

beiLadendesFensters(Menüresize);
beiResizeDesFensters(Menüresize);
```


----------



## Purdey (10. Oktober 2012)

Vielen Dank und das müsste ich dann wohl für i elemente machen, da ich ja die anzahl nicht kenne?


----------



## Carrear (10. Oktober 2012)

Naja wenn die Anzahl mittelfristig variabel ist, dann müsstest du die Elemente einfach vorher zählen und es für i elemente mit einer schleife machen  achso und wenn es bei vergrößern des Fensters auch wieder andersrum laufen soll müssten die einzelnen if schleifen so aussehen denke ich:


```
if(breite(Menuecontainer) < breiteElementeins + breiteElementzwei + breiteElementdrei) {
        hauptmenü>Elementdrei.css('display','none');
        dropdownmenü>Elementdrei.css('display','block');
    } elseif(breite(Menuecontainer) >= breiteElementeins + breiteElementzwei + breiteElementdrei) {
        hauptmenü>Elementdrei.css('display','block');
        dropdownmenü>Elementdrei.css('display','none');
    }
```


----------



## Purdey (10. Oktober 2012)

ich werde mich mal hieran probieren, wobei ich echt gespannt bin ob das so klappt.


----------



## Carrear (10. Oktober 2012)

warum sollte es nicht ^^ ist logisch. und genau so auch mit jquery umsetzbar


----------



## Purdey (11. Oktober 2012)

So ich habe das ganze mal vom Schema in die Praxis übertragen:


```
<script src="js/facebox/jquery.js" type="text/javascript"></script>

<style type="text/css">
#hauptmenue li, #dropdownmenue li
{
display:inline;
list-style-type: none;
padding-right: 20px;
}
</style>

<script type="text/javascript">
function menueresize() {

var breiteElementeins = $("ul#hauptmenue li.Elementeins").outerWidth();
var breiteElementzwei = $("ul#hauptmenue li.Elementzwei").outerWidth();
var breiteElementdrei = $("ul#hauptmenue li.Elementdrei").outerWidth();
var breiteMenuecontainer = $("div#menuecontainer").width();

/*
alert("breiteElementeins: "+breiteElementeins);
alert("breiteElementzwei: "+breiteElementzwei);
alert("breiteElementdrei: "+breiteElementdrei);
alert("breiteMenuecontainer: "+breiteMenuecontainer);
*/
    if (breiteMenuecontainer < breiteElementeins + breiteElementzwei + breiteElementdrei) {
		$("ul#hauptmenue li.Elementdrei").css('display','none');	
		$("ul#dropdownmenue li.Elementdrei").css('display','block');
	 } else if (breiteMenuecontainer >= breiteElementeins + breiteElementzwei + breiteElementdrei) {
		$("ul#hauptmenue li.Elementdrei").css('display','inline');
		$("ul#dropdownmenue li.Elementdrei").css('display','none');
	}
	
	if (breiteMenuecontainer < breiteElementeins + breiteElementzwei) {
		$("ul#hauptmenue li.Elementzwei").css('display','none');
		$("ul#dropdownmenue li.Elementzwei").css('display','block');
    } else if (breiteMenuecontainer >= breiteElementeins + breiteElementzwei) {
		$("ul#hauptmenue li.Elementzwei").css('display','inline');
		$("ul#dropdownmenue li.Elementzwei").css('display','none');
	}
    
    if (breiteMenuecontainer < breiteElementeins) {
		$("ul#hauptmenue li.Elementeins").css('display','none');
		$("ul#dropdownmenue li.Elementeins").css('display','block');
    } else if (breiteMenuecontainer >= breiteElementeins) {
		$("ul#hauptmenue li.Elementeins").css('display','inline');
		$("ul#dropdownmenue li.Elementeins").css('display','none');
	}
}


$(window).resize(function() {
  menueresize();
});
 
$(window).load(function () {
  menueresize();
});
</script>

<div id="menuecontainer">
    <ul id="hauptmenue">
        <li class="Elementeins">H Eintrag 1 H Eintrag 1</li>
        <li class="Elementzwei">H Eintrag 2 H Eintrag 2</li>
        <li class="Elementdrei">H Eintrag 3 H Eintrag 3</li>
    </ul>
    <ul id="dropdownmenue">
       <li class="Elementeins">D Eintrag 1</li>
       <li class="Elementzwei">D Eintrag 2</li>
       <li class="Elementdrei">D Eintrag 3</li>
    </ul>
</div>
```

Kannst du mir vielleicht an meinem Bsp. zeigen, wie ich hier nun die schleife baue für i elemente welche in den Menüs stehen könnten?

Ansonsten funktioniert es schon ganz gut!


----------



## Carrear (11. Oktober 2012)

Sorry ^^ bin grad auf Arbeit, aber ich denke die wichtigsten Informationen wie so etwas aussehen kann um dich dann in 1 oder 2 Stunden arbeit dadurch zu beißen findest du in jedem Fall hier: http://de.selfhtml.org/javascript/sprache/schleifen.htm - Ist auch glaube ich generell nicht verkehrt sich mal mit dem Thema schleifen auseinander zu setzen  Braucht man oft.


----------



## Purdey (12. Oktober 2012)

Also ich habe mir das jetz ne ganze weile angsehen, nur leider verstehe ich das noch nicht so ganz weil ich hole ja die anzahl der elemente aus einer mysql db.

Ich habe das ganze nun mal bisschen detailierter und mit einem echten Dropdown gemacht.
Wichtig war noch das ich die Prüfung umgekehrt erfolgen muss damit am Ende das Dropdown auch entsprechend eingeblendet wird. Zusätzlich bestimme ich noch die Breite des Dropdowns und addiere selbiges, damit es auch hinpasst und in einer Zeile angezeigt wird.

Vielleicht kannst du mir ja doch nochmal helfen?

Die Elemtente habe ich auch schon mal angepasst: breiteElement_XXX 

XXX kann durch den aktuellen Counterstand ersetzt werden.


```
<script src="js/facebox/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/template.css" type="text/css" />
<link rel="stylesheet" href="css/dropdown.css" type="text/css" />

<style type="text/css">
#menuecontainer
{
float:left;
width:100%;
}
</style>

<script>
	$(document).ready(function() {
		// Toggle the dropdown menu's
		$(".dropdown .button, .dropdown button").click(function () {
			$(this).parent().find('.dropdown-slider').slideToggle('fast');
			$(this).find('span.toggle').toggleClass('active');
			return false;
		});
	}); // END document.ready
	
	// Close open dropdown slider/s by clicking elsewhwere on page
	$(document).bind('click', function (e) {
		if (e.target.id != $('.dropdown').attr('class')) {
			$('.dropdown-slider').slideUp();
			$('span.toggle').removeClass('active');
		}
	}); // END document.bind
</script>

<script type="text/javascript">
function menueresize() {

var breiteElement_1 = $("#menuecontainer #buttons a#1").outerWidth();
var breiteElement_2 = $("#menuecontainer #buttons a#2").outerWidth();
var breiteElement_3 = $("#menuecontainer #buttons a#3").outerWidth();
var breiteMenuecontainer = $("div#menuecontainer").width();
var breiteDropmenu = $("#dropmenue").outerWidth();


/*
alert("breiteMenuecontainer: "+breiteMenuecontainer);
alert("breiteElement_1: "+breiteElement_1);
alert("breiteElement_2: "+breiteElement_2);
alert("breiteElement_3: "+breiteElement_3);

var ges = breiteElement_1 + breiteElement_2 + breiteElement_3;
alert("breiteMenuecontainer < breiteElement_1 + breiteElement_2 + breiteElement_3 || " + breiteMenuecontainer + " < " + ges);
alert(breiteDropmenu);
*/
	 
	 if (breiteMenuecontainer < breiteElement_1 + breiteDropmenu) {
		$("#menuecontainer #buttons a#1").css('display','none');
		$("#dropmenue").css('display','inline');
		$("#drop1").css('display','block');
    } else if (breiteMenuecontainer >= breiteElement_1 + breiteDropmenu) {
		$("#menuecontainer #buttons a#1").css('display','inline');
		$("#dropmenue").css('display','none');
		$("#drop1").css('display','none');
	}

	if (breiteMenuecontainer < breiteElement_1 + breiteElement_2 + breiteDropmenu) {
		$("#menuecontainer #buttons a#2").css('display','none');
		$("#dropmenue").css('display','inline');
		$("#drop2").css('display','block');
    } else if (breiteMenuecontainer >= breiteElement_1 + breiteElement_2 + breiteDropmenu) {
		$("#menuecontainer #buttons a#2").css('display','inline');
		$("#dropmenue").css('display','none');
		$("#drop2").css('display','none');
	}

    if (breiteMenuecontainer < breiteElement_1 + breiteElement_2 + breiteElement_3 + breiteDropmenu) {
		$("#menuecontainer #buttons a#3").css('display','none');
		$("#dropmenue").css('display','inline');	
		$("#drop3").css('display','block');
	 } else if (breiteMenuecontainer >= breiteElement_1 + breiteElement_2 + breiteElement_3 + breiteDropmenu) {
		$("#menuecontainer #buttons a#3").css('display','inline');
		$("#dropmenue").css('display','none');
		$("#drop3").css('display','none');
		
	}
    
}


$(window).resize(function() {
  menueresize();
});
 
$(window).load(function () {
  $("#dropmenue").css('display','none')
  menueresize();
});
</script>

<div id="menuecontainer">
	<div class="buttons" id="buttons">
	  <a href="#" class="button left" id="1" style="background-color:red; text-shadow:0px;"><span class="label">xxx 1</span></a>
	  <a href="#" class="button middle" id="2" style="background-color:yellow; text-shadow:0px;"><span class="label">xxx 2</span></a>
	  <a href="#" class="button right" id="3" style="background-color:blue; text-shadow:0px;"><span class="label">xxx 3</span></a>
	  
		<div class="dropdown right" id="dropmenue">
		  <a href="#" class="button" id="drop0"><span class="label">weitere Bereiche</span><span class="toggle">&nbsp;</span></a>
		  <div class="dropdown-slider">
			<a href="#" class="ddm" id="drop1" style="background-color:red; text-shadow:0px;"><span class="label">xxx 1</span></a>
			<a href="#" class="ddm" id="drop2" style="background-color:yellow; text-shadow:0px;"><span class="label">xxx 2</span></a>
			<a href="#" class="ddm" id="drop3" style="background-color:blue; text-shadow:0px";><span class="label">xxx 3</span></a>
		  </div> <!-- /.dropdown-slider -->
		</div> <!-- /.dropdown -->
	  
	</div> <!-- /.buttons -->


</div>
```


----------

