Gå til innhold

Mazå

Medlemmer
 Vis profil  Se deres aktivitet

  • Innlegg

    179

  • Ble med

  • Besøkte siden sist

 Innholdstype 

Innlegg skrevet av Mazå

  10. [Løst] html meny/navigasjon hjelp [Haster]

    i Programmering og webutvikling

    Skrevet

    ok anna spørsmål da, Hvordan får jeg vekk den der grå linja oppe på menyen? ein slags skygge

     

     

    /* navigasjon /meny starter
*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
height:50px;
list-style:none;
margin:0;
padding:0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
}
.menu li{
float:left;
padding:0px 0px 0px 15px;
}
.menu li a{
color: #D4C5AE;
display: block;
font-weight: normal;
line-height: 50px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
.menu li a:hover{
background:#C60;
color:#FFFFFF;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
.menu ul li:hover a{
background: #C60;
color: #EEEEEE;
text-decoration: none;
}
.menu li ul{
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 10px;
z-index: 200;
}
.menu li:hover ul{
display:block;
}
.menu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px;
background: #4b4b4b;/*this is where the rounded corners for the dropdown disappears*/
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display: block;
height: 50px;
font-size: 12px;
font-style: inherit;
text-align: left;
}
.menu li ul a:hover, .menu li ul li:hover a{
border:0px;
color:#ffffff;
text-decoration:none;
background:#C60;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}
/*slutter*/


    <div class="menu">
  <ul>
   <li>
	<a href="index.html">HJEM</a>
</li>
<li>
	<a href="om.html">OM</a>
</li>
<li><a href=".....html">....</a>
	<ul>
		<li><a.......html">.....</a></li>
		<li><a href="......html">....</a></li>
		<li><a href="........html">.....</a></li>
		<li><a href=".......html">.....</a></li>
		<li><a href=".......html">.......</a></li>
		<li><a href=".....html">.....</a></li>
  <li><a href=".....html">......</a></li>
	</ul>
 <li>
	<a href="kontakt.html">KONTAKT</a>
</li>	  
</div>

  14. [Løst] html meny/navigasjon hjelp [Haster]

    i Programmering og webutvikling

    Skrevet

    nedenfor har du kode for navigasjon. der som er prikker står det til vanlig noe men som jeg visket ut nå så ikke andre så^^

     

    tok med css kode for navigasjonen min. tror jeg fikk med det meste

     

     

    <ul>
   <li>
    <a href="index.html">HJEM</a>
   </li>
   <li>
    <a href="om.html">OM</a>
   </li>
   <li><a href="......html">....</a>
    <ul>
	    <li><a href="......html">....</a></li>
	    <li><a href="....html">...</a></li>
	    <li><a href=".....html">....</a></li>
	    <li><a href="......html">....</a></li>
	    <li><a href="......html">.....</a></li>
	    <li><a href=".....html">....</a></li>
  <li><a href=".....html">....</a></li>
    </ul>
 <li>
    <a href="kontakt.html">KONTAKT</a>
   </li>	  
   </li>
</ul>

     

    /* navigasjon /meny starter
*/
* {
line-height: 40px;
}
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
ul li {
position: relative;
display: inline;
padding: 13px;

   background: #;
border: solid 1px #fff;
}
ul li a {
font-size: 0.8em;
color: #F90;
text-decoration: none;
}
ul li > ul {
   width: 200px;
   display: none;
   position: absolute;
   padding-top: 7px;
left:0px;
top:29px;
}
ul li:hover {
}
ul li:hover > ul {
display: block;
}
ul li > ul li {
   display: block;
}
ul li ul li {
background: #3f3e3e;
}

  22. [Løst] Drop down meny hjelp

    i Programmering og webutvikling

    Skrevet

    Her er en liten jsfiddle jeg har laget for å demonstrere prinsippet: http://jsfiddle.net/B8eua/

     

    Jeg sier ikke at denne er cross-browser kompatibel, ei heller klar for produksjon. På tross av dette så tror jeg det er enklere å se hva som faktisk foregår når man stripper vekk attributter som ikke har annen funksjon enn krykker for eldre nettlesere. De viktigste punktene jeg kan peke på er at under li:hover (musepeker-over) gir display:block på dens direkte ul childs. Dette defineres med gapetegnet >. Det er med dette selve "drop-down" funksjonaliteten defineres. Alt annet er utseende / estetikk.

     

    Håper dette er til hjelp :)

    Takk for hjelpa Emilkje.
×
×
  • Opprett ny...