Jump to content

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


Recommended Posts

MPVeronika

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 post
Share on other sites

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 post
Share on other sites
MPVeronika

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...