Implementierung des HTML-Gleit- und Schwebeball-Menüeffekts

html,Text{
	Breite: 100 %;
	Höhe: 100%;
	Rand: 0; Polsterung: 0;
}

/*Navigationssymbol*/
.NMH-g-navicon{
	Position: fest;
	oben: 40%;
	rechts: 020px;
	Breite: 100px;
	Höhe: 100px;
}
.NMH-g-navicon.Jnmh-onleft{
	rechts: auto;
	links: 020px;
}
/*Navigationssymbol-Logo-Schaltfläche*/
.NMH-g-navicon .Jnmh-btnlogo{
	Position: absolut;
	Anzeige: Block;
	Breite: 100px;
	Höhe: 100px;
	oben: 50 %;
	rechts: 0;
	Rand oben: -50px;
	Rand: 0;
	Hintergrund: URL (Bild/Icon_128.png) keine Wiederholung, Mitte, Mitte;
    Hintergrundgröße: 95 % 95 %;
    Rand: 1px durchgezogen rgba(0, 0, 0, 0,1);
    Box-Schatten: rgba(0, 0, 0, 0,12) 0px 6px 10px 0px;
	Gliederung: keine;
	Randradius: 50 %;
	Z-Index: 1;
}
.NMH-g-navicon .Jnmh-btnlogohover{
	Position: absolut;
	Anzeige: Block;
	Breite: 100px;
	Höhe: 100px;
	oben: 50 %;
	rechts: 0;
	Rand: 0; Polsterung: 0;
	Rand oben: -50px;
	Rand: 0;
	Überlauf: versteckt;
	/*Hintergrundfarbe: rot;*/
}

/*Navigationssymbol-Logo-Schaltfläche – Maus darüber bewegen*/
.NMH-g-navicon.Jnmh-öffnen .Jnmh-btnlogohover{
	Rand oben: -150px;	
	Breite: 200px;
	Höhe: 300px;
	Rahmenradius: 150px 0 0 150px;
}
.NMH-g-navicon.Jnmh-onleft .Jnmh-btnlogohover{
	links: 0;
	rechts: auto;
	Rahmenradius: 0 150px 150px 0;
}
/*Untercontainer für Navigationssymbolmenü*/
.NMH-g-navicon .Jnmh-m-submenu{
	Position: absolut;
	Hintergrundfarbe: transparent;
	Listenstil: keiner;
	oben: -020px;
	unten: -020px;
	links: -020px;
	rechts: -020px;
	Rand: 0;
	Polsterung: 0;
}

.NMH-g-navicon .Jnmh-m-Untermenü .Jnmh-subli{
	Position: absolut;
	Breite: 100 %; Höhe: 100 %;
	transformieren: drehen (0 Grad);
    -webkit-transform: drehen(0 Grad);
    Übergang: alle 0,8 s Ein- und Ausfahren;
}

.Jnmh-m-Untermenü .Jnmh-subdl{
	Position: absolut;
    links: 50%;
    unten: 100 %;
    Breite: 0;
    Höhe: 0;
    Zeilenhöhe: 1px;
    Rand links: 0;
    Hintergrund: #fff;
    Randradius: 50 %;
    Textausrichtung: zentriert;
    Schriftgröße: 1px;
    Überlauf: versteckt;
    Cursor: Zeiger;
    Kastenschatten: keiner;
    Übergang: alles 0,8 s Ein-Aus, Farbe 0,1 s, Hintergrund 0,1 s;
}
/*Navigationssymbol – beim Erweitern des Menüs*/
.NMH-g-navicon.Jnmh-öffnen .Jnmh-m-Untermenü .Jnmh-subdl{
	Breite: 80px;
    Höhe: 80px;
    Zeilenhöhe: 80px;
    Rand links: -40px;
    Kastenschatten: 0 3px 3px rgba (0, 0, 0, 0,1);
    Schriftgröße: 14px;
}
/*Navigationssymbol-Drei-Ebenen-Menücontainer*/
.NMH-g-navicon.Jnmh-öffnen .Jnmh-m-Untermenü .Jnmh-subdd{
	Position: absolut;
	Zeilenhöhe: normal;
}

<div id="nmh-navicon" Klasse="NMH-g-Plugin NMH-g-navicon">
		<button class="Jnmh-btnlogo"></button>
		<ins class="Jnmh-btnlogohover"></ins>
		<ul Klasse="Jnmh-m-Untermenü">
			<li Klasse="Jnmh-subli">
				<dl Klasse="Jnmh-subdl">
					<dt class="NMH-subdt">E-Commerce-Plattform</dt>
					<dd class="NMH-subdd"></dd>
				</dl>
			</li>
			<li Klasse="Jnmh-subli">
				<dl Klasse="Jnmh-subdl">
					<dt class="NMH-subdt">Plattform zur Produktauswahl</dt>
					<dd class="NMH-subdd"></dd>
				</dl>
			</li>
			<li Klasse="Jnmh-subli">
				<dl Klasse="Jnmh-subdl">
					<dt class="NMH-subdt">Mitglieds-Upgrade</dt>
					<dd class="NMH-subdd"></dd>
				</dl>
			</li>
			<li Klasse="Jnmh-subli">
				<dl Klasse="Jnmh-subdl">
					<dt class="NMH-subdt">Produktbetrieb</dt>
					<dd class="NMH-subdd"></dd>
				</dl>
			</li>
			<li Klasse="Jnmh-subli">
				<dl Klasse="Jnmh-subdl">
					<dt class="NMH-subdt">Persönliches Zentrum</dt>
					<dd class="NMH-subdd"></dd>
				</dl>
			</li>
		</ul>
	</div>

<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<Skripttyp="text/javascript">
	// Auf das Ereignis „Mauseingabe ins Logo“ warten $(document).on('mouseenter','.Jnmh-btnlogo',function(){
		$('#nmh-navicon').addClass('Jnmh-öffnen');
		GtoggleNavlogo();
	});
	// Achten Sie auf das Entfernen der Maus oder auf Ereignisse zum Entfernen des Navigationsballs (warum achten wir nicht direkt auf #nmh-navicon, wenn wir den schwebenden Ball ausdehnen und zusammenziehen? Stattdessen achten wir noch einmal auf das Logo, um die Kantenauslösung zu reduzieren)
	$(document).on('mouseleave','#nmh-navicon',function(){
		$('#nmh-navicon').removeClass('Jnmh-öffnen');
		GtoggleNavlogo();
	});
	var GtoggleNavlogo = Funktion(){
	    var li = $('#nmh-navicon').find('.Jnmh-subli');
	    var lilen = li.Länge;
	    var avgDeg = 180/(lilen-1); // Durchschnittswinkel var initDeg = 0; // Startrichtungswinkel if($('#nmh-navicon').hasClass('Jnmh-onleft')){
	    	// Wenn der schwebende Ball nach links gezogen wird, wird das sekundäre Menü rechts angezeigt li.css({transform: 'rotate(0deg)'});
	    	initDeg = 180;
	    }anders{
	    	// Standardmäßig befindet sich der schwebende Ball rechts und das sekundäre Menü links li.css({transform: 'rotate(-360deg)'});
	    }
	    für(var i=0,j=lilen-1; i<lilen; i++,j--) {
	        var d = initDeg - (i*avgDeg);
	        var z = initDeg?j:i;
	        // konsole.log(d);
	        $('#nmh-navicon').hasClass('Jnmh-open') ? GrotateNavlogo(li[z],d) : GrotateNavlogo(li[z],0);
	    }
	};
	var GrotateNavlogo = Funktion (dom, Grad) {
		$({a:0}).animieren({a:deg}, {
	        Schritt: Funktion (jetzt, fx) {
	            $(dom).css({ transform: 'rotate('+now+'deg)' });
	            $(dom).children().css({ transform: 'rotate('+(-now)+'deg)' });
	        }, Dauer: 0
	    });
	}

	//Ziehen Sie das Logo mit der Maus, um es zu verschieben $(document).on('mousedown','.Jnmh-btnlogo',function(e_down){
		var wrap = $('#nmh-navicon');
		wrap.removeClass('Jnmh-öffnen');
		$('.Jnmh-m-submenu').hide();
		GtoggleNavlogo();
		
		var positionDiv = wrap.offset();
	    var AbstandX = e_down.pageX - positionDiv.links;
	    var AbstandY = e_down.pageY - positionDiv.top + $(document).scrollTop();
		$(Dokument).mousemove(diy_move);
		Funktion diy_move(e_move){
			var x = e_move.pageX - EntfernungX;
	        var y = e_move.pageY - EntfernungY;

	        wenn (x < 0) {
	            x = 0;
	        } sonst wenn (x > $(document).width() - wrap.outerWidth(true)) {
	            x = $(Dokument).width() - Wrap.äußereWidth(true);
	        }

	        wenn (y < 0) {
	            y = 0;
	        } sonst wenn (y > $(window).height() - wrap.outerHeight(true)) {
	            y = $(Fenster).Höhe() - Wrap.ÄußereHöhe(true);
	        }

	        $(wrap).css({
	            'links': x + 'px',
	            „oben“: y + „px“
	        });
		}
		$(Dokument).mouseup(Funktion() {
			var x = $(wrap).offset().left;
			var rm = '',ad = 'Jnmh-öffnen';
			wenn(x > $(document).width()/2){
				x = $(Dokument).width() - wrap.äußereWidth(true) -10;
				rm = "Jnmh-links";
			}anders{
				x = 10;
				Anzeige + = "Jnmh-links";
			}
			$(wrap).css({left: x + 'px'}).addClass(ad).removeClass(rm);
			$('.Jnmh-m-submenu').anzeigen();
			GtoggleNavlogo();
	        $(document).unbind('Mausbewegung',diy_move);
	    });

	});

</Skript>