Question

我会创建此Navigation。我用css和js尝试了一些东西。但它不适用于每个浏览器，我认为代码很脏。

导航悬停的细线是长度的中心。透明的小辫子位于蓝色的小吊架下，而导航（或导弹）的主体宽度灵活。

您有什么想法来创建这个导航干净？可能没有JS？

我希望你能帮助我。我已经花了这么多时间而且没有正确的工作。

你的，黄色

＆＃13;

$( ".active" ).mouseover(function() {

  var xbreite = this.offsetWidth;
  //Breite von nav-sub
  var ybreite = this.nextElementSibling.offsetWidth;

  var zbreite = ybreite - xbreite; 
  var xb = xbreite/2;
  xb = xb - 23;
  var zb = ybreite - xb;
  xb = xb+"px";
  zb = zb+"px";
  
  // console.log(this.nextElementSibling.firstElementChild.firstElementChild);
   //div rest -> aber bekomme kein element und style unter gebracht
 
  var rest = this.nextElementSibling.firstElementChild.firstElementChild;
  rest.style.width=xb;
  
  var eck = this.nextElementSibling.firstElementChild.lastElementChild;
  eck.style.width=zb;
  
  //Subnav sichtbar machen
//  this.nextElementSibling.style.top='59px';
    this.nextElementSibling.style.visibility='visible';
});


//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
  
  var navsubs = $('.nav-sub');
  var subsCount = $(navsubs).length;
  
  for( hilf = 0; hilf < subsCount; hilf++){
    //navsubs[hilf].style.top='-9999999px';
  navsubs[hilf].style.visibility='hidden';}
});

＆＃13;

.bcg{
  position:absolute;
  z-index:2;
}

.header{
	position:fixed;
	height:84px;
  z-index:10;
	background-color:#579dd3;
	opacity: 0.75;
  width:100%;
	z-index: 100;
}

.logo{ 
	float:left;
	padding-left:1.875em;
	padding-top:0.938em;
}

.nav{
	float:left;
}

/* Navigation Primär */
.nav-prim{
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  position:absolute;
  right:1.64em;
  bottom: -1.2em;
  font-size:17px;
  text-transform:uppercase;
  z-index:999;
}

/* Dreieck Navigation Primär */
.nav-prim ul li a {
  position: relative;
}

.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
    bottom: -12px;
    content: "";
    display: block;
    height: 32px;
    position: absolute;
    width: 65px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
  }

/*Aktiver Link */
.nav-prim .active{
    position: relative;
}

.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
    bottom: -12px;
    content: "";
    display: block;
    height: 32px;
    position: absolute;
    width: 65px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

/* Ende Dreieck Navigation Primär */



.nav-prim ul li{
  float:left;
  list-style:none;
  padding-left:0.7em;
  padding-right:0.7em;
/*  position: relative; */
}

.nav-prim ul li:last-child{
  padding-right:0;
}

.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}










/* Subnavigation */
.nav-sub{
  position:absolute;
  color:blue;
  padding:0;
  margin:0;
  z-index:11111;
 visibility:hidden;
 top: 59px;
 /* 
display:none;*/

}

.nav-sub li{
  clear:both;
  padding:0 !important;
  margin:0;
  background-color:white;
  width:100%; 

}

.nav-sub li:first-child{
  background-color:transparent;
  padding:0;
  margin:0;
  
  
} 

.nav-sub .eck{
  background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
  background-repeat:no-repeat;
  height:25px;
  float:left;
}

.nav-sub .rest{
  background-color:white;
  height:25px;
  width:30%;float:left;
}

.nav-sub a{
  color:blue !important;
  text-transform:none;
  
  
}

.nav-sub a:hover{
  color:red !important;
  background-image:none !important;
}

.nav-sub a:hover::after{
   border:0 !important; 
  background-image:none !important;
}

＆＃13;

		<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
		<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 

<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif"> 
  
  <div class="header">
    <div class="logo">
           <a href="index.html"><img width="60" src="https://davidwalsh.name/demo/codepenLogo.png"></a> 
    </div> 
    <div class="nav"> 
      <div class="nav-prim">  
            <ul>
              <li>
                <a class="active" href="#">Tätigkeitsbereiche</a>
                <ul class="nav-sub"> 
                  <li>  
                    <div class="rest"></div> 
                    <div class="eck"></div>    
                  </li>  
                  <li><a href="#g">Seite 1</a></li> 
                  <li><a href="#g">Coperate dsfsdfsdf Events  blubb blieeee</a></li>
                </ul> 
                
              </li>
              <li>
                <a href="#">Leistungen</a>
              </li>
              <li>
                <a href="#">Projekte</a>
                
              </li> 
              <li>  
                <a class="active" href="#">Fähigkeiten</a> 
                <ul class="nav-sub"> 
                  <li>  
                    <div class="rest"></div>   
                    <div class="eck"></div>    
                  </li>  
                  <li><a href="#g">Seite 1</a></li> 
                  <li><a href="#g">Coperate dsfsdfsdf Events  blubb blieeee</a></li>
                </ul> 
                
              </li>
              <li>
                <a href="#">Aktuelles</a>
              </li>
            </ul>
      </div>
    </div>
  </div>

＆＃13;

Answer 1

嗨你可以使用这样的东西

HTML

<div class="nav"> 
      <div class="nav-prim">  
            <ul>
              <li>
                <a class="active" href="#">Tätigkeitsbereiche</a>
                <ul class="nav-sub"> 
                  <li>  
                    <div class="rest">
                      <div class="eck"></div> 
                    </div> 

                  </li>  
                  <li><a href="#g">Seite 1</a></li> 
                  <li><a href="#g">Coperate dsfsdfsdf Events  blubb blieeee</a></li>
                </ul> 

              </li>
              <li>
                <a href="#">Leistungen</a>
              </li>
              <li>
                <a href="#">Projekte</a>

              </li> 
              <li>  
                <a class="active" href="#">Fähigkeiten</a> 
                <ul class="nav-sub"> 
                  <li>  
                    <div class="rest"><div class="eck"></div></div>   

                  </li>  
                  <li><a href="#g">Seite 1</a></li> 
                  <li><a href="#g">Coperate dsfsdfsdf Events  blubb blieeee</a></li>
                </ul> 

              </li>
              <li>
                <a href="#">Aktuelles</a>
              </li>
            </ul>
      </div>
    </div>

还有一些css

body
{
  background-color : #eeeeee;
}
div.nav ul
{
    list-style-type : none;
}

div.nav ul li
{
    font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    color:black;
    float: left;
    padding: 10px;
    vertical-align: middle;
    text-transform:uppercase;
  position : relative;
  background-color : #0000ff;
}

div.nav a
{
    color:black;    
}

div.nav li ul 
{
    display: none;
    position : absolute;
    top : 100%;
    left : -40px;
    padding-top : 5px;
}

div.nav li:hover ul 
{
    display: block;
    position: absolute;
    z-index: 999;    
}

div.nav li:hover li 
{
    float:none; 
    padding: 0;
    text-align:left;
}

div.nav li:hover li a 
{ 
    min-width: 150px;
    display:block;
}

.rest {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #eeeeee;
  margin-left : 10px;
  position : relative;
}

.eck {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #0000ff;
  margin-left : 10px;
  position : absolute;
  top : -25px;
  left : -30px;
  z-index : 999;
}

您还可以在此处查看小提琴https://jsfiddle.net/x8x2L93u/

导航 - 透明，水平中心，难以使用子导航

1 个答案: