Problemen met menu

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Suzanne Brok

Suzanne Brok

26/12/2015 10:34:57
Quote Anchor link
Goede dag,

Ik heb een menu gemaakt maar helaas werkt hij niet. Op 1 of andere manier neemt hij mijn CSS niet over.
Zouden jullie eens willen kijken en mij willen helpen om het werkend te krijgen?

Mijn CSS over het menu:
Quote:
#Menu,
#Menu ul,
#Menu li,
#Menu a {

border: none;
line-height: 1;
margin: 0;
padding: 0;

}


#Menu {

height: 37px;
display: block;
border: 1px solid;
border-radius: 5px;
width: auto;
border-color: #080808;
margin: 0;
padding: 0;

}


#Menu > ul {

list-style: inside none;
margin: 0;
padding: 0;

}


#Menu > ul > li {

list-style: inside none;
float: left;
display: inline-block;
position: relative;
margin: 0;
padding: 0;

}


#Menu.align-center > ul {

text-align: center;

}


#Menu.align-center > ul > li {

float: none;
margin-left: -3px;

}


#Menu.align-center ul ul {

text-align: left;

}


#Menu.align-center > ul > li:first-child > a {

border-radius: 0;

}


#Menu > ul > li > a {

outline: none;
display: block;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
font-weight: 700;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
border-right: 1px solid #080808;
color: #ffffff;
padding: 12px 20px;

}


#Menu > ul > li:first-child > a {

border-radius: 5px 0 0 5px;

}


#Menu > ul > li > a:after {

content: "";
position: absolute;
border-right: 1px solid;
top: -1px;
bottom: -1px;
right: -2px;
z-index: 99;
border-color: #3c3c3c;

}


#Menu ul li.has-sub:hover > a:after {

top: 0;
bottom: 0;

}


#Menu > ul > li.has-sub > a:before {

content: "";
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #ffffff;

}


#Menu > ul > li.has-sub:hover > a:before
{
top: 19px;

}


#Menu > ul > li.has-sub:hover > a {

padding-bottom: 14px;
z-index: 999;
border-color: #3f3f3f;

}


#Menu ul li.has-sub:hover > ul,
#Menu ul li.has-sub:hover > div {

display: block;

}


#Menu > ul > li.has-sub > a:hover,
#Menu > ul > li.has-sub:hover > a {

background: #3f3f3f;
border-color: #3f3f3f;
}


#Menu ul li > ul,
#Menu ul li > div {

display: none;
width: auto;
position: absolute;
top: 38px;
background: #3f3f3f;
border-radius: 0 0 5px 5px;
z-index: 999;
padding: 10px 0;

}

#Menu ul li > ul {
width: 200px;
}


#Menu ul ul ul {
position: absolute;
}


#Menu ul ul li:hover > ul {
left: 100%;
top: -10px;
border-radius: 5px;
}


#Menu ul li > ul li {
display: block;
list-style: inside none;
position: relative;
margin: 0;
padding: 0;
}


#Menu ul li > ul li a {
outline: none;
display: block;
position: relative;
font: 10pt Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
margin: 0;
padding: 8px 20px;
}
#Menu,
#Menu ul ul > li:hover > a,
#Menu ul ul li a:hover {
background: #3c3c3c;
background: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c3c3c), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: -ms-linear-gradient(top, #3c3c3c 0%, #222222 100%);
background: linear-gradient(top, #3c3c3c 0%, #222222 100%);
}
#Menu > ul > li > a:hover {
background: #080808;
color: #ffffff;
}
#Menu ul ul a:hover {
color: #ffffff;
}
#Menu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}


Mijn php bestand menu

Quote:
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>

<div class="Menu">

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
                    // Hier word gecontroleerd of je als admin ingelogd bent
            if ($_SESSION['Naam']== "admin") {
                
        ?>

<!-- Het Menu als je als admin ingelogd bent -->
<ul class="Menu">
<li><a href='index.php'><span>Home</span></a></li>
<li class="Menu"><a href='vriendenboek.php'><span>Vriendenboek</span></a>
<ul>
<li><a href='toevoegenVrienden.php'><span>Vrienden toevoegen</span></a></li>
<li class="Menu"><a href='muterenvrienden.php'><span>Vrienden wijzigen</span></a></li>
<li class="Menu"><a href='verwijderenvrienden.php'><span>Vrienden verwijderen</span></a></li>
<li class="Menu"><a href='CMSbeschrijvingvriend.php'><span>CMS Vrienden</span></a></li>
</li>
</ul>
<li class="Menu"><a href='autoboek.php'><span>Autoboek</span></a>
<ul>
<li><a href='toevoegenAutomerk.php'><span>Auto toevoegen</span></a></li>
<li><a href='muterenauto.php'><span>Auto wijzigen</span></a></li>
<li><a href='verwijderenauto.php'><span>Auto verwijderen</span></a></li>
</ul>

<li><a href='vriendenboekdeluxe2.php'><span>Vriendenboek deluxe</span></a></li>
<li><a href='toevoegenVriend.php'><span>Koppel nieuwe vriend aan auto</span></a></li>
</li>
</ul>

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<?php
        
            }
            else {
            
        ?>

<!-- Het Menu als je niet als admin ingelogd bent -->
<ul class="Menu">
<li class="Menu"><a class="Menu" href="index.php">Home</a></li>
<li class="Menu"><a class="Menu" href="vriendenboek.php">Vriendenboek</a></li>
<li class="Menu"><a class="Menu" href="autoboek.php">Autoboek</a></li>
<li class="Menu"><a class="Menu" href="vriendenboekdeluxe2.php">Vriendenboek Deluxe</a></li>
</ul>
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
        
            }
            
        ?>




</div>
</html>
 
PHP hulp

PHP hulp

26/12/2024 10:06:45
 
Jan de Laet

Jan de Laet

26/12/2015 10:40:24
Quote Anchor link
Moeten alle #Menu inde CSS niet vervangen worden door .Menu.
# verwijst naar een id, en . naar een class. En jij gebruikt class="Menu".

Plaats svp de volgende keer je code tussen [.code.] en [./code.] (en dan zonder de puntjes).
Gewijzigd op 26/12/2015 10:42:23 door Jan de Laet
 
Suzanne Brok

Suzanne Brok

26/12/2015 17:00:05
Quote Anchor link
Geweldig. Het werkt!
En dankzij jouw uitleg begrijp ik het ook beter. Het zijn de kleine dingen.

Kan ik mooi weer verder.

Toevoeging op 26/12/2015 17:11:00:

Toch nog 1 probleempje. Hij laat het onderliggende menu niet meer zien. Bijvoorbeeld bij Vriendenboek zou hij een menu moeten geven met o.a. vrienden toevoegen, vrienden wijzigen.

Hoe los ik dit op?
 
Jan de Laet

Jan de Laet

27/12/2015 09:24:30
Quote Anchor link
Op het hoogste niveau in je menu moet je bij de li met class Menu, de class has-sub toevoegen, bijvoorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<li class="Menu has-sub">
  <a href="vriendenboek.php"><span>Vriendenboek</span></a>


En dit bij allemaal die een sub-menu hebben.
Misschien nog niet helemaal de uitkomst die je wilt hebben, maar submenu doet het dan wel.
Gewijzigd op 27/12/2015 09:26:59 door Jan de Laet
 
Harmen Havekes

Harmen Havekes

27/12/2015 12:27:26
Quote Anchor link
Gebruik geen hoofdletters in je CSS

Verder vindt ik het wel erg veel CSS code om een submenu te laten werken.
Misschien kan je proberen alles wat gemakkelijker in te delen en de code wat te versimpelen.

Refactoren heet dat en word veel gedaan in code.
Het is een goede manier om jezelf en je code naar een hoger level te brengen.
 
Suzanne Brok

Suzanne Brok

28/12/2015 10:04:04
Quote Anchor link
Super bedankt voor jullie tips en hulp.
Het werkt nu zoals ik wil :)
 



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.