Heim  >  Artikel  >  Web-Frontend  >  jquery+CSS3 implementiert die Dropdown-Navigationsmenüfunktion

jquery+CSS3 implementiert die Dropdown-Navigationsmenüfunktion

php中世界最好的语言
php中世界最好的语言Original
2018-04-24 11:28:371683Durchsuche

Dieses Mal bringe ich Ihnen jquery+CSS3 zur Implementierung der Dropdown-Navigationsmenüfunktion. Was sind die Vorsichtsmaßnahmen für jquery+CSS3 zur Implementierung der Dropdown-Navigationsmenüfunktion? Praktischer Fall, werfen wir einen Blick darauf.

Die HTML-Struktur des Dropdown-Menüs ist sehr einfach. Die grundlegende HTML-Struktur ist wie folgt:

<p id="top-bar" class="top-bar">
 <p class="bar">
  <button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button>
 </p>
 <p class="navbox">
  <p class="navbox-tiles">
  <a href="#" class="tile">
   <p class="icon"><i class="fa fa-home"></i></p><span class="title">Home</span>
  </a>
  ......
  </p>
 </p>
</p>

CSS-Stil

Im CSS-Stil ist die obere Navigationsleiste .top-bar auf eine feste Höhe von 50 Pixel und relative Positionierung eingestellt und erhält einen hohen Z-Index-Wert .

.top-bar {
 height: 50px;
 position: relative;
 z-index: 1000;
}

Das Dropdown-Menü.navbox ist zunächst ausgeblendet. Es verwendet die absolute Positionierung und verschiebt es mithilfe der TranslateY-Methode auf 200 Pixel über der Navigationsleiste.

.top-bar .navbox {
 visibility: hidden;
 opacity: 0;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1;
 -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
   transform: translateY(-200px);
 -webkit-transition: all .2s;
   transition: all .2s;
}

Wenn dann das Dropdown-Menü aktiviert wird, wird seine Transparenz auf 1 zurückgesetzt, wird sichtbar und durch die TranslateY-Methode wieder an seine ursprüngliche Position verschoben.

.top-bar.navbox-open .navbox {
 visibility: visible;
 opacity: 1;
 -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
   transform: translateY(0);
 -webkit-transition: opacity .3s, -webkit-transform .3s;
   transition: opacity .3s, transform .3s;
}

JavaScript

In diesem Spezialeffekt wird jQUEry verwendet, um die entsprechende Klasse zu wechseln und die Menüschaltfläche zu öffnen.

(function () {
 $(document).ready(function () {
 $('#navbox-trigger').click(function () {
  return $('#top-bar').toggleClass('navbox-open');
 });
 return $(document).on('click', function (e) {
  var $target;
  $target = $(e.target);
  if (!$target.closest('.navbox').length && !$target.closest('#navbox-trigger').length) {
  return $('#top-bar').removeClass('navbox-open');
  }
 });
 });
}.call(this));

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erklärung der Schritte für JQuery-Akkordeon-Spezialeffekte

JQuery, um einen Menü-Scrolleffekt nach links und rechts zu erzielen

Das obige ist der detaillierte Inhalt vonjquery+CSS3 implementiert die Dropdown-Navigationsmenüfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn