html - "Peger/pil/tap" mellem submenu og menu - Udvikleren.dk

Tags: html css

Bruger #15629 @ 07.03.13 22:21

Hej..

Har ikke brugt dette site så meget, men er løbet ind i et problem jeg håber at der er en der kan hjælpe mig med.
Jeg har brug for at vide, hvorledes man laver en forbindelse mellem sin sub menu og hovede menu.
Noget ligende dette (selve forbindelsen) : Pilen

Og skulle så gerne komme til at frem bringe noget lignende; Sub Menu

Jeg forventer ikke at få serveret en løsning, men evt. en retning til søgning på nettet.

Problemet med det Linket "Sub Menu" er at den ikke fungerer, når man ":hover" på menu item'et.. Den skulle jo også gerne være dynamisk, sådan at "pilen" fulgte med ved ":hover" på de andre menu Item's.

Håber der er en der vil give lidt hjælp med dette problem :-)

6 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #16605 @ 07.03.13 23:13

Hvis du snakker om, at den dynamisk og flydende skal følge med, hvor musen holder (over menuen selvfølgelig), ville jeg nok søge efter nogle jQuery navigations plugins, som der findes tusinder af gratis på nettet.

Hvis pilen bare skal komme frem ved siden af det menu-item man holder over, kan du jo bare lave en style der ser nogenlunde sådan her ud:

CSS kode

 .menu-item:hover{
    background-image:url('pil.png');
    background-repeat:no-repeat;
    //Dette kræver dog, at menu-item er bredt nok, ellers vil man ikke kunne se billedet pga. det simpelthen sidder udenfor kassen. Det kan man løse med noget padding.
    background-position:50px 5px;    
 }

Bare lidt ideer til hvordan du kan løse det, håber det hjalp

Indlæg senest redigeret d. 07.03.2013 23:26 af Bruger #16605

Bruger #16605 @ 10.03.13 15:07

Hej igen Niels, jeg tror du skal droppe dit div-element, hvori pilen er. Istedet skal du sætte pil-billedet som baggrund af ul-elementet, og derved spare en masse kode.

Jeg har opdateret din kode lidt, og det her burde virke:

HTML kode

 <html>
     <head>
         <style >
         #size1 ul {
             position: relative;
         }
 
         #size1 ul li a {
             text-decoration: none;
             color: #DEB887;
         }
 
         #size1 ul li {
             position: relative;
             list-style-type: none;
             margin: 8px 8px 8px 0;
             width: 115px;
             height: auto;
             text-align: center;
             line-height: 40px;
             display: block;
             background: #524F62;
         }
 
         #size1 ul li ul li {    
             width: 130px;
             height: auto;
             display: block;
         }
 
         #size1 ul li ul {
             display: none;
         }
 
         #size1 ul li:hover ul {
             display: block;
             position: absolute;
             top:0;
             left: 100%;
             background: url(billeder/pil1.png) no-repeat 5px 5px;
             padding-left:20px;
         }
 
         #size1 ul li ul li {
             margin: 0;
         }
 
         #size1 ul li:hover {
             background: #FFFACD;
         }
         </style>
     </head>
 
     <body style="background: #DEFF56;">
         <div id="header">
         </div>
         
         <div id="site">
             <div id="size1">    
                 <ul> 
                     <li><a href="#">Side 1 </a> 
                         <ul>
                             <li><a href="#">Side 1_1 </a></li>
                             <li><a href="#">Side 1_2 </a></li>
                             <li><a href="#">Side 1_3 </a></li>
                         </ul>
                     </li>
                     <li><a href="#">Side 2 </a> </li>
                     <li><a href="#">Side 3 </a> </li>
                     <li><a href="#">Side 4 </a> </li>
                     <li><a href="#">Side 5 </a> </li>
                 </ul>
             </div>
         </div>
     </body>
 </html>

Jeg håber det kan hjælpe dig

Bruger #15629 @ 08.03.13 12:34

Hej..

Det prøver jeg Emil.. Vender så lige tilbage, hvis noget skulle kikse.

Hvordan giver man noget for hjælpen her på Udvikleren??

Bruger #16605 @ 08.03.13 19:36

Du kan stemme et indlæg/svar ned eller op ved at trykke på pilene ude til venstre for svaret

Bruger #15629 @ 10.03.13 11:12

Hej...

Jeg har leget lidt med det og "her" .. Har jeg farvet "Sub Menu'ens" UL Gul. Jeg kan ikke få "Sub Meu'ens" List-Items til at mødes med pilens bagkant.
Er der nogen der kan se, hvad jeg gør galt :

HTML kode

 #size1 ul {
     position: relative;
 }
 #size1 ul li a {
     text-decoration: none;
     color: #DEB887;
 }
 #size1 ul li {
     position: relative;
     list-style-type: none;
     margin: 8px 8px 8px 0;
     width: 115px;
     height: auto;
     text-align: center;
     line-height: 40px;
     display: block;
     background: #524F62;
 }
 #size1 ul li ul li {    
     width: 130px;
     height: auto;
     display: block;
 }
 #size1 ul li ul {
     display: none;
 }
 #size1 ul li:hover ul {
     display: block;
 }
 #size1 ul li ul li {
     margin: 0;
 }
 #size1 ul li:hover {
     background: #FFFACD;
 }
 li:hover .pil {
     bottom: 0;
     height: 30px;
     position: absolute;
     left: 100%;
     background: red url(billeder/pil1.png) no-repeat;
     border: 1px solid red;
 }
 .pil ul {
     margin-left: 31px;
     background: yellow;
 }
 
 </style>
 </head>
 <body style="background: #DEFF56;">
     
     <div id="header">
     </div>
     <div id="site">
         <div id="size1">    
                 <ul> 
                     <li><a href="#">Side 1 </a> 
                     <div class="pil">
                         <ul>
                             <li><a href="#">Side 1_1 </a> </li>
                             <li><a href="#">Side 1_2 </a> </li>
                             <li><a href="#">Side 1_3 </a> </li>
                         </ul>
                     </div>
                     </li>
                     <li><a href="#">Side 2 </a> </li>
                     <li><a href="#">Side 3 </a> </li>
                     <li><a href="#">Side 4 </a> </li>
                     <li><a href="#">Side 5 </a> </li>
                 </ul>
         </div>
         <div id="size2">
         </div>
         <div id="size3">
         </div>
     </div>
 
 </body>
 </html>

Håber der er en med lidt hjælp her :-)

Bruger #15629 @ 10.03.13 23:43

Hej Emil..

Tusind tak for det... DEt ser ud som det skal, problemet er bare når jeg så ":hover" over Side1 og Ul'en fremkommer med "Pil" og "list-Items"...Så gælder ":hover" stadig uden for pilen i tomrummet mellem Side1, side2 og list-itemmene.. Den skulle gerne slippe, når man kommer uden for pilen.

Håber du forstår min forklaring.

"Peger/pil/tap" mellem submenu og menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler