Gå til innhold

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

Mazå

Av Mazå
i Programmering og webutvikling

Anbefalte innlegg

Mazå

Mazå

Skrevet
Skrevet (endret)

Hei

 

Holder da på å lage ei webside, men har et problem med menyen/navigasjonen.

55722869.png

 

Hvordan kan jeg få det tettere sammen og få vekk de der hvite strekan rundt? vil ha litt meir normal meny. Er altfor stort mellomrom mellom katogoriane i den drop down menyen der.

 

 

 

Takk på forhånd:D

Endret av Mazå
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Mazå

Mazå

Skrevet
  • Forfatter
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;
}

Lenke til kommentar
Mazå

Mazå

Skrevet
  • Forfatter
Skrevet (endret)

Da blir jo selve menyen og mindre da.

Når jeg forandrer padding, så er det kun selve utseendet som blir mindre, ikke dei underkatogoriane

 

vet du hvordan jeg kan få en meny som denne?

 

- liten tynn strek mellom katogoriane?

 

husker ikke hvor jeg fant dette bildet men

image1gj.jpg

Endret av Mazå
Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

Kopier den jqueryen som står på siden, legg det i et eget dokument, kall dokumentet jQueryDropDown.js, også linker du til det i <head></head>. Du må også linke til jQuery for at det skal fungere.

 

<head>
   <!-- andre ting som du har med(tittel, css osv) -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script src="<!-- link til jQueryDropDown.js fila di -->"></script>
</head>

Lenke til kommentar
Mazå

Mazå

Skrevet
  • Forfatter
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>

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...