dropdown / onclick Menü in Sitebar Box

afrokontakt · 25. Juni 2016

Hallo,

wie kann ich ein Dropdown-Menü in der Dashboard Sitbar Box erstellen?
Ich habe da je Menü ungefähr 30 - 40 Untermenüs, die je nach Rubrik nach unten aufklappbar sein sollen.

Habe schon einiges versucht, wird dann immer abgeschnitten, wird also nicht komplett angezeigt.
Ich brauche keine Scrollbar da in den Untermenüs, es soll einfach bei Klick öffnen und bei Klick wieder Schließen.

Hat mir Jemand einen Tipp ?

Gruß

afrokontakt · 25. Juni 2016

Hallo,

css:

CSS

/* Sitebar Box Klappmenü */


.klappmich{
 display: none;
}
.dropdown-menu{
  display: none;
}
label {
/*  color: #ff0000; */
 font-size: 2.0rem !important;
  cursor: pointer;
}
label:hover {
  color: #0060f6;
}
.dropdown div a{
    font-size: 1.2rem !important;
	text-decoration: none;
}
.dropdown div a:hover {
  color: #0060f6;
}
input[type="checkbox"]:checked ~ .dropdown-menu {
  display: block;
}

Alles anzeigen

html:

(Dashboard, eigene Boxen)

Boxname: Klappmich

Code

<hr><br />
<!-- ################# menue1 ###################### -->
<div class="dropdown">
<input type="checkbox" class="klappmich" id="menue1" />
<label class="knopf" data-toggle="dropdown" for="menue1" >Ξ Menü 1</label>
<div class="dropdown-menu">
<br />
<div><a href=" # ">? 1</a></div>
<div><a href=" # ">? 2</a></div>
<div><a href=" # ">? 3</a></div>
<div><a href=" # ">? 4</a></div>
<div><a href=" # ">? 5</a></div>
</div>
</div>
<br />


<!-- ################# menue2 ###################### -->


<div class="dropdown">
<input type="checkbox" class="klappmich" id="menue2" />
<label class="knopf" data-toggle="dropdown" for="menue2" >Ξ Menü 2</label>
<div class="dropdown-menu">
<br />
<div><a href=" # ">? 1</a></div>
<div><a href=" # ">? 2</a></div>
<div><a href=" # ">? 3</a></div>
<div><a href=" # ">? 4</a></div>
<div><a href=" # ">? 5</a></div>
<div><a href=" # ">? 6</a></div>
</div>
</div>
<br />


<!-- ################# menue3 ###################### -->
<div class="dropdown">
<input type="checkbox" class="klappmich" id="menue3" />
<label class="knopf" data-toggle="dropdown" for="menue3" >Ξ Menü 3</label>
<div class="dropdown-menu">
<br />
<div><a href=" # ">? 1</a></div>
<div><a href=" # ">? 2</a></div>
<div><a href=" # ">? 3</a></div>
<div><a href=" # ">? 4</a></div>
<div><a href=" # ">? 5</a></div>
</div>
</div>
<br />

Alles anzeigen

Tom · 26. Juni 2016

Dir fehlt da das Javascript? Oder nutzt du die Funktion von jQuery-UI?

https://jqueryui.com/accordion/

Es werden im WCF keine CSS-Klassen mitgeliefert, nur Javascript. Du musst die neu schreiben oder aus der Liv von jQuery-UI extrahieren.

Aus meinen Stilen für die Sidebar ohne jQuery-UI:

HTML

<nav class="mainMenu customSidebarContent sidebarSlidemenu">
	<h2>Slidemenu</h2>
		<ul>
			<li class="sidebarDropdownMenu">
				<a class="sidebarDropdownMenuLink" href="#">
					<span class="menuIcon"></span>
					<span class="menuDescription">Menu 1</span>				
				</a>
				<div class="sidebarDropdownMenuBase mainMenu" style="display: none;">
					<ul>
						<li><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a href="#">Link 3</a></li>
					</ul>
				</div>
			</li>


			<li class="sidebarDropdownMenu">
				<a class="sidebarDropdownMenuLink" href="#">
					<span class="menuIcon"></span>
					<span class="menuDescription">Menu 2</span>				
				</a>
				<div class="sidebarDropdownMenuBase mainMenu" style="display: none;">
					<ul>
						<li><a href="#">Link 4</a></li>
						<li><a href="#">Link 5</a></li>
						<li><a href="#">Link 6</a></li>
					</ul>
				</div>
			</li>


			<li class="sidebarDropdownMenu">
				<a class="sidebarDropdownMenuLink" href="#">
					<span class="menuIcon"></span>
					<span class="menuDescription">Menu 3</span>				
				</a>
				<div class="sidebarDropdownMenuBase mainMenu" style="display: none;">
					<ul>
						<li><a href="#">Link 7</a></li>
						<li><a href="#">Link 8</a></li>
						<li><a href="#">Link 9</a></li>
					</ul>
				</div>	
			</li>
		</ul>
</nav>


<script data-relocate="true">
	//<![CDATA[
		$(function() {
			$('li.sidebarDropdownMenu').each(function() {
				var $sidebarDropdownMenu = $(this);
				$("a.sidebarDropdownMenuLink", $sidebarDropdownMenu).click(function(e) {
					e.preventDefault();
					$div = $("div.sidebarDropdownMenuBase", $sidebarDropdownMenu);
					$div.toggle("fast");
					$("div.sidebarDropdownMenuBase").not($div).hide("fast");
					return false;
				});
			});
			$('html').click(function(){
    			$("div.sidebarDropdownMenuBase").hide("fast");
			});
		});


	//]]>
</script>

Alles anzeigen

CSS

.sidebarSlidemenu {
	display: none;
}


.sidebarDropdownMenuLink {
	position:relative;
}


.sidebarDropdownMenuLink:after {
	content: "\f0dd";
	font-family: FontAwesome;
	position:absolute;
	right:7px;
	top:-2px;
}


.sidebarDropdownMenuBase.mainMenu {
	background: rgba(0, 0, 0, 0) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-top: 4px;
	margin-bottom: 0px;
}


.sidebarDropdownMenuBase > ul {
	margin-top:2px;
}


.sidebarDropdownMenuBase > ul > li > a {
	padding: 0 12px !important;
	width: @baseMenuButtonWidth !important;
	height: 35px;
	box-sizing: border-box;
}


.sidebarDropdownMenuBase > ul > li:last-child {
	padding:0 !important
}

Alles anzeigen

Das sieht dann so aus:

dropdown / onclick Menü in Sitebar Box

cls-design

Informationen

Demoinstallationen

Hilfe