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

[Purdey]

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

 

[Carrear]

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

 

[Purdey]

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]

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]

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>