floating menu met dropdown [CSS]

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Dennis WhoCares

Dennis WhoCares

01/09/2015 20:59:59
Quote Anchor link
Hi all,

ik heb een menu bovenin mijn header staan. Dit menu bevat een submenu:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<header>
        <ul class="navigation">
              <li><a href="#" id="active">menu1</a></li
              ><li><a href="#">menu2</a>
              <ul>
                  <li><a href="#">sub1</a></li>
                  <li><a href="#">sub2</a></li>
                  <li><a href="#">sub3</a></li>
              </ul></li
              ><li><a href="#">menu3</a></li
              ><li><a href="#">menu4</a></li>
        </ul>
        <div class="outer"><div class="inner">
            <img src="imgs/quote.png">
        </div></div>
</header>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
header {
            width: 100%;
            
            background-color: #333333;
            
            text-align: center;
            overflow: hidden;
        }
header .navigation {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    z-index: 999999;
}
header .navigation li { float:left; }
header .navigation li a {
    padding:9px 20px;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
header .navigation ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
header .navigation li:hover { position:relative; background:#5FD367; }
header .navigation li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

header .navigation li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
header .navigation li:hover ul li a:hover { background:#005555; }


        /* Big quote */
        header .outer {
            width: 100%;
            min-width: 1024px;
            margin: 0 auto;
            overflow: hidden;
            
            padding: 0;
            margin-bottom: -5px;
        }
        header .inner {
            position:relative;
            float: right;
            right: 50%;
            
            padding: 0px;
            margin: 0px;
        }
        header .inner img {
            position: relative;
            right:-50%;
            
            height: 300px;
            width: auto;
            
            padding: 0px;
            margin: 0px;
        }


Ik heb al gespeeld met z-index etc, maar ik krijg mij menu niet bovenop de 'quote' image. & div's
 
PHP hulp

PHP hulp

28/03/2024 23:07:22
 
Johan K

Johan K

01/09/2015 21:14:23
Quote Anchor link
Dennis WhoCares op 01/09/2015 20:59:59:
Hi all,

ik heb een menu bovenin mijn header staan. Dit menu bevat een submenu:
...
Ik heb al gespeeld met z-index etc, maar ik krijg mij menu niet bovenop de 'quote' image. & div's

Jouw code gekopieerd en geplakt in een html document, en het werkt prima hier.
http://imgur.com/ZOXQgCr

Buiten dit allemaal om, hou het lekker simpel en go compatibel. Je kan je eigen menu maken die werkt op jouw browser maar misschien net iets anders op een andere.
Superfish is een CSS menu die werkt om meerdere browsers en die dezelfde style heeft als jouw menu.
Gewijzigd op 01/09/2015 21:18:01 door Johan K
 
Dennis WhoCares

Dennis WhoCares

01/09/2015 21:34:37
Quote Anchor link
Hi Johan,

Bedankt voor je reactie, zie wel dat je geen image hebt gebruikt
Ik heb onder t menu een grote image geplaatst, en het submenu valt dan onder de image, daarom heb ik dat stuk ook aangegeven, welli ht dat t daaraan ligt

Ik zal eens kijken naar de menu welke je noemde, maar wil de site eigenlijk zo klein mogelijk houden (in data)

Daarbin werk ik op n mac met voornamelijk firefox maar ook safari, chrome en IE via parallels coherence om alles naast elkaar te zetten
 
Johan K

Johan K

01/09/2015 21:41:45
Quote Anchor link
Dennis WhoCares op 01/09/2015 21:34:37:
Hi Johan,

Bedankt voor je reactie, zie wel dat je geen image hebt gebruikt
Ik heb onder t menu een grote image geplaatst, en het submenu valt dan onder de image, daarom heb ik dat stuk ook aangegeven, welli ht dat t daaraan ligt

Ik zal eens kijken naar de menu welke je noemde, maar wil de site eigenlijk zo klein mogelijk houden (in data)

Daarbin werk ik op n mac met voornamelijk firefox maar ook safari, chrome en IE via parallels coherence om alles naast elkaar te zetten

Aah ik zie wat je bedoeld.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
header .navigation li { float:left; z-index:1;}

Lost dat probleem op.
Gewijzigd op 01/09/2015 21:48:03 door Johan K
 
Dennis WhoCares

Dennis WhoCares

03/09/2015 20:40:10
Quote Anchor link
ach... zo lomp he!

Enorm bedankt Johan!
 
Dennis WhoCares

Dennis WhoCares

18/01/2016 20:49:26
Quote Anchor link
Punt 2:

Ik heb het volgende menu gemaakt: jsfiddle
Maar ik krijg op geen enkele mogelijkheid de rounded borders in de submenu's goed..

Zal een klein puntje zijn denk ik.. Iemand ? :)

Bij de hover op de onderste li item raak ik de borders kwijt.
Gewijzigd op 19/01/2016 07:59:26 door Dennis WhoCares
 
Dennis WhoCares

Dennis WhoCares

30/01/2016 20:31:04
Quote Anchor link
bumped
 
Dennis WhoCares

Dennis WhoCares

04/02/2016 16:10:17
Quote Anchor link
bumped :)

Niemand ?
 
Y S

Y S

04/02/2016 19:17:27
Quote Anchor link
Daarvoor moet je de hover div/divs ook een border-radius geven.
Gewijzigd op 04/02/2016 19:19:27 door Y S
 
Dennis WhoCares

Dennis WhoCares

04/02/2016 20:12:53
Quote Anchor link
Hi,

zoiets had ik ook al geprobeerd, maar dat moet dus alleen bij de laatste ul li ul li a

---

Heb het gefixed, om een of andere reden moest het op allbij:
#navigation li:hover ul li:last-child:hover, #navigation li:hover ul li:last-child:hover a

Op de een of ander, werkte niet goed.
Gewijzigd op 04/02/2016 20:38:26 door Dennis WhoCares
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.