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

May 25, 2013

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.

index.html

<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>

</div>

</a>

</div>

<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;}

May 25, 2013

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.

May 26, 2013

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?

Sign In

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

Recommended Posts

MPVeronika 0

Link to post

Share on other sites

usver 402

Link to post

Share on other sites

MPVeronika 0

Link to post

Share on other sites

Join the conversation

Browse