Jump to content

Navigācija ar dropdown, kurā pa vidu ielikts logo.

MPVeronika

MPVeronika,
in Programmēšana

 Share

Recommended Posts

MPVeronika

MPVeronika

Ierakstīts
Ierakstīts

Sveiki! Lūk ir tāda lieta, ka šobrīd izstrādāju savu diplomdarbu,kā arī 1x mūžā veidoju mājas lapu.

man ir izstrādāta šāda navigācija, TAČU nemāku izdarīt tā, ka navigācijai pa vidu būtu ievietots šāds logo, kurš arī strādātu kā links uz sākumu.

Varbūt kāds varētu ieteikt kā to labāk izdarīt?

 

pagaidām man ir superneizdevies neveiksmīgs šāds variants

Paldies par palīdzību.

post-96271-0-35297300-1369511908_thumb.png

post-96271-0-26962600-1369511863_thumb.pngpost-96271-0-26962600-1369511863_thumb.png

 

index.html

 

<div id='cssmenu'>
<ul>
   <li class='active'><a href='index.html'><span>Sākums</span></a></li>
   <li class='has-sub'><a href='#'><span>Pakalpojumi</span></a>
      <ul>
         <li><a href='kaminzale.html'><span>Kamīnzāle</span></a></li>
<li><a href='kempings.html'><span>Kempings</span></a></li>
<li><a href='pirts.html'><span>Pirts</span></a></li>
         <li class='last'><a href='pepija.html'><span>Pepija</span></a></li>
      </ul>
 </ul>
 </div>
<div id="logo">
<a href="index.html" >
 <img src="gabali/logo.png" />
</a>
</div>
<div id='cssmenu'>
 <ul>
   </li>
   <li><a href='galerija.html'><span>Galerija</span></a></li>
   <li class='last'><a href='kontakti.html'><span>Kontakti</span></a></li>
</ul>
</div>

 

stils.css

 

 
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#none; border-color:#none; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:none; border-color:#none;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#a67547; background:-moz-linear-gradient(top,  #a67547 0%, #88583a 100%); background:-webkit-gradient(linear, left top, left bottom); background:-webkit-linear-gradient(top,  #a67547 0%,#88583a 100%); background:-o-linear-gradient(top,  #a67547 0%,#88583a 100%); background:-ms-linear-gradient(top,  #a67547 0%,#88583a 100%); background:linear-gradient(top,  #a67547 0%,#88583a 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a67547', endColorstr='#88583a',GradientType=0 ); } 
 
#cssmenu > ul > li > a{border-right:1px solid #583926; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#d5a172;} 
#cssmenu > ul > li > a:hover{background:#7e4e31;} 
Link to comment
Share on other sites
usver

usver

post-62394-0-41303300-1369520761_thumb.png

 

kods:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>

<div id='cssmenu' style="margin-top: 100px;">
<ul>
   <li class='active'><a href='index.html'><span>Sākums</span></a></li>
   <li class='has-sub'><a href='#'><span>Pakalpojumi</span></a>
    <ul>
        <li><a href='kaminzale.html'><span>Kamīnzāle</span></a></li>
        <li><a href='kempings.html'><span>Kempings</span></a></li>
        <li><a href='pirts.html'><span>Pirts</span></a></li>
        <li class='last'><a href='pepija.html'><span>Pepija</span></a></li>
    </ul>
     <li class="logo"><img src="logo.png" style="margin-top: -100px;" onClick="window.location='index.html'"></li>
   <li><a href='galerija.html'><span>Galerija</span></a></li>
   <li class='last'><a href='kontakti.html'><span>Kontakti</span></a></li>
</div>

#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#none; border-color:#none; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:none; border-color:#none;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#a67547; background:-moz-linear-gradient(top,  #a67547 0%, #88583a 100%); background:-webkit-gradient(linear, left top, left bottom); background:-webkit-linear-gradient(top,  #a67547 0%,#88583a 100%); background:-o-linear-gradient(top,  #a67547 0%,#88583a 100%); background:-ms-linear-gradient(top,  #a67547 0%,#88583a 100%); background:linear-gradient(top,  #a67547 0%,#88583a 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a67547', endColorstr='#88583a',GradientType=0 ); }
#logo { background:none !important; }
 
#cssmenu > ul > li > a{border-right:1px solid #583926; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#d5a172;}
#cssmenu > ul > li > a:hover{background:#7e4e31;}

uz firefox kā nākas, galvenā izmaiņa - nepārraut to <ul> posmu, bet vienkārši pa vidu ielikt vienu īpašu bloku, kam ar CSS pateikt, ka brūno krāsu nevajadzēs un vispār tam blokam neko īpašu nevajadzēs.

tāpat bildītei fiksais risinājums <a> novākt, onclick aizstāt. nav smuki, bet ielikts lai nečakarētos ar CSS.



CSSā vienīgā izmaiņa, kas jāskatās: #logo rindiņa.

  • Patīk 1
Link to comment
Share on other sites
MPVeronika

MPVeronika

  • Author

Liels paldies!

Jā, uz firefox iet, bet uz pārējiem diemžēl nē...



ā, nē, nē, viss aizgāja! TAču, vai kads nevaretu pateikt, kā to visu navigaciju izstiept? nu ta lai smuki tas podziņas izretinās? :)

Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share
Iet uz tēmu sarakstu
×
×
  • Izveidot jaunu...