Springen naar inhoud


- - - - -
Solved

verticaal menu veranderen naar horizontaal menu

menu verticaal horizontaal

  • Log in a.u.b. om te beantwoorden
Er zijn 5 reacties in dit onderwerp

#1 badboyqxy

badboyqxy

    Master Developer

  • Leden
  • PipPipPipPipPip
  • 505 berichten
    Laatst bezocht 08 sep 2014 22:14

Geplaatst op 06 februari 2012 - 22:36

Ik heb wat divjes die voorzien worden d.m.v. css van een achtergrond kleur en van een mouse over effect.
Nu wil ik een ander thema hebben waarin ik ze eventueel ook horizontaal zou kunnen presenteren.
Ik heb alleen geen idee hoe ik dit zou moeten realiseren

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR...nal.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/19...9/xhtml[/url]">
<head>
  <?php
   if(!isset($_SESSION))
   {
	SESSION_START(); //start indien nodig de sessie
   }
  ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dorb Portal</title>
</head>
<?php  
   //maakt verbinding met de database
   include('connect.php');
   mysql_select_db($_SESSION['DB'], $con);
  
   //haalt gegevens op
   $result = mysql_query("
   select
	paginaNm,paginaUrl
   from
	tblGebruikers,tblPaginas,tblRechten,tblRollen
   where
	tblGebruikers.gebruikersRolId = tblRollen.rolId
	and tblRechten.rechtRolId = tblRollen.rolId
	and tblRechten.rechtPaginaId = tblPaginas.paginaId
	and tblGebruikers.gebruikersId = ".$_SESSION['gebruikerId']  
   );
   //sluit verbinding
   mysql_close();

//begint tekenen menu
echo '<div id="menu">';

while($row = mysql_fetch_array($result))
{
  //escaped de gegevens opgehaald uit de database, voor ze verder gebruikt mogen worden
  $knopNm = mysql_escape_string($row['paginaNm']);
  $knopLink = mysql_escape_string($row['paginaUrl']);

  //tekend alle menu items die specifiek toegekend zijn aan de rol van de gebruiker
  echo ("
   <a href='".$knopLink."'>
	<div id='".$knopNm."'>
	 ".$knopNm." <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  ");
}
?>
<!-- tekent de uitlog knop, deze knop wordt altijd getekend aangezien elke gebruiker moet kunnen uitloggen -->
<a href="uitloggen.php">
  <div id="uitloggen">
   uitloggen
  </div>
</a>

</div>
</body>
</html>


Bron code
HTML Code:

<!--
Deze code tekent de menu behorende aan de rol waar de gebruiker zich in bevindt.
Geupdate op:
door:
wat:
gemaakt door *
gemaakt op 6-2-2012
versie 0.1
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR...nal.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/19...9/xhtml[/url]">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dorb Portal</title>
</head>
<div id="menu">
   <a href='Ticket_Aanmaken.php'>
	<div id='Ticket_Aanmaken'>
	 Ticket_Aanmaken <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  
   <a href='Openstaande_Tickets_Bekijken.php'>
	<div id='Openstaande_Tickets_Bekijken'>
	 Openstaande_Tickets_Bekijken <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  
   <a href='gesloten_tickets.php'>
	<div id='gesloten_tickets'>
	 gesloten_tickets <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  
   <a href='account_beheer.php'>
	<div id='account_beheer'>
	 account_beheer <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  
   <a href='rechten_systeem.php'>
	<div id='rechten_systeem'>
	 rechten_systeem <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  
   <a href='opmerkingenBeheer.php'>
	<div id='opmerkingenBeheer'>
	 opmerkingenBeheer <!-- deze regel moet verwijderd worden wanneer de css goed is -->
	</div>
   </a>
  
<!-- tekent de uitlog knop, deze knop wordt altijd getekend aangezien elke gebruiker moet kunnen uitloggen -->
<a href="uitloggen.php">
  <div id="uitloggen">
   uitloggen
  </div>
</a>

</div>
</body>
</html>



css code
HTML Code:
@charset "utf-8";
/* CSS Document */
#html  {
   height:99%;
  }
#body  {
   height:98%;
   font-family:Arial, Helvetica, sans-serif;
  }
#wrap  {
   min-height:100%;
   width:100%;
  }
  
#logo  {
   margin-left:auto;
   margin-right:auto;
   height:122px;
   width:150px;
  }
#banner {
   background-image:url('Images/thema_red/banner.png');
   width:100%;
   height:122px;
   background-position:center;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   box-shadow: 0px 0px 10px #000;
  }

.verzenden
{
  border-color:#000;
  border-width:1px;
  border-radius:4px 4px 4px 4px;
  color:#F90;
  cursor:pointer;
  display:inline-block;
  padding:6px 6px 4px;
  margin-top:10px;
  font:12px Arial, Helvetica, sans-serif;
  background:#666666;
}
  
#h1
  {
   float:left;
   color:#F60;
   font-weight:bold;
   font-size:16px;
   font-family:Arial, Helvetica, sans-serif;
  }
#view {
   width:992px;
   height:500px;
   border:0px solid;
   float:inherit;
   margin:0px auto;
  }
  
#menu  {
   width:200px;
   border-left: 1px solid;
   border-bottom: 1px solid;
   border-top: 1px solid;
   border-right: 1px solid;
   float:left;
   font-family:Arial, Helvetica, sans-serif;
   background-color:#666666;
   box-shadow: 0px 0px 20px #666666;
  }
  
#ticket_aanmaken, #openstaande_tickets, #gesloten_tickets, #account_beheer, #rechten_systeem, #opmerkingenBeheer, #management, #test, #faq
  {
   width:200px;
   text-align:center;
  }
#opmerkingen
  {
   background-image:url('Images/thema_red/opmerkingen.png');
   height:49px;
   width:100%;
   text-align:center;
   background-position:center;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   box-shadow: 0px 2px 7px #000;
  }
#infobar {
   float:right;
   height:30px;
   width:789px;
   border-bottom:0px solid;
   background:#0F253F;
   color:#FFFFFF;
   font-family:Arial, Helvetica, sans-serif;
   text-align:center;
}
#main {
   width:787px;
   min-height:360px;
   border: 0px solid;
   float:right;
   font-family:Arial, Helvetica, sans-serif;
}
#inlog  {
   width:300px;
   border:1px solid;
   margin:auto;
   background-color:#D66858;
   font-family:Arial, Helvetica, sans-serif;
   text-align: right;
  }
  
#navigatie {
   padding: 3px 0 0 0;
   margin: 0;
   list-style: none;
   height:30px;
  }

#ticket_aanmaken
  {
   background-image:url('Images/thema_red/button_hoover_ticketaanmaken.png');
   width: 200px;
   height: 48px;
  }
#ticket_aanmaken:hover
  {
	  background:url('Images/thema_red/button_unpressed_ticketaanmaken.png') no-repeat;
  }

#openstaande_tickets
  {
   background-image:url('Images/thema_red/button_hoover_openstaandeticketsbekijken.png');
   width: 200px;
   height: 48px;
  }
#openstaande_tickets:hover
  {
	  background:url('Images/thema_red/button_unpressed_openstaandeticketsbekijken.png') no-repeat;
  }
  
#gesloten_tickets
  {
   background-image:url('Images/thema_red/button_hoover_geslotenticketsbekijken.png');
   width: 200px;
   height: 48px;
  }
#gesloten_tickets:hover
  {
	  background:url('Images/thema_red/button_unpressed_geslotenticketsbekijken.png') no-repeat;
  }
#account_beheer
  {
   background-image:url('Images/thema_red/button_hoover_accountbeheer.png');
   width: 200px;
   height: 48px;
  }
#account_beheer:hover
  {
	  background:url('Images/thema_red/button_unpressed_accountbeheer.png') no-repeat;
  }
#rechten_systeem
  {
   background-image:url('Images/thema_red/button_hoover_rechtensysteem.png');
   width: 200px;
   height: 48px;
  }
#rechten_systeem:hover
  {
	  background:url('Images/thema_red/button_unpressed_rechtensysteem.png') no-repeat;
  }
#opmerkingenBeheer
  {
   background-image:url('Images/thema_red/button_hoover_opmerkingen.png');
   width: 200px;
   height: 48px;
  }
#opmerkingenBeheer:hover
  {
	  background:url('Images/thema_red/button_unpressed_opmerkingen.png') no-repeat;
  }
#management
  {
   background-image:url('Images/thema_red/button_hoover_managementoverzichten.png');
   width: 200px;
   height: 48px;
  }
#management:hover
  {
	  background:url('Images/thema_red/button_unpressed_managementoverzichten.png') no-repeat;
  }  
#faq
  {
   background-image:url('Images/thema_red/button_hoover_faq.png');
   width: 200px;
   height: 48px;
   position:fixed;
   left:50%;
  }
#faq:hover
  {
	  background:url('Images/thema_red/button_unpressed_faq.png') no-repeat;
  }  
#uitloggen
  {
   background-image:url('Images/thema_red/button_hoover_uitloggen.png');
   width: 200px;
   height: 48px;
  }
#uitloggen:hover
  {
	  background:url('Images/thema_red/button_unpressed_uitloggen.png') no-repeat;
  }
  
#transbox
   {
   width:200px;
   height:48px;
   opacity:1;
   filter:alpha(opacity=100);
   }
  
.input
{
  background:#666666;
  border-bottom:1px solid #333;
  border-left:1px solid #000;
  border-right:1px solid #333;
  border-top:1px solid #000;
  color:#F90;
  border-radius: 3px 3px 3px 3px;
  font:13px Arial, Helvetica, sans-serif;
  padding:6px 6px 4px;
  width:200px;
  box-shadow: 0px 0px 20px #F90;
}
table
{
  background:#666666;
  color:#F90;
  border:#F90;
}
th, td
  {
  color:#F90;
}


met vriendelijke groet,

#2 Eviltwin

Eviltwin

    Professional Developer

  • Leden
  • PipPipPipPip
  • 299 berichten
    Laatst bezocht 09 mei 2014 15:22
  • LocatieKampen, Nederland

Geplaatst op 06 februari 2012 - 23:20

Misschien kun je met de volgende link wat...(is met list-items, zo zou ik het zelf doen):
http://peterned.home...es/cssmenu.html

Even het HTML bestand downloaden en de CSS jatten. Deze aanpassen naar eigen wens en vervolgens op je eigen website toepassen.


Waar je mogelijk ook nog het gewenste effect mee kan bereiken is met listitems en vervolgens met de display propertys gaan rommelen:
http://www.w3schools...ass_display.asp

Als je met divs wilt blijven werken: je afhankelijk van de geselecteerde style een bepaalde CSS laden en hier in de posities van de divs aanpassen :D

Groeten

Eviltwin

#3 badboyqxy

badboyqxy

    Master Developer

  • Leden
  • PipPipPipPipPip
  • 505 berichten
    Laatst bezocht 08 sep 2014 22:14

Geplaatst op 08 februari 2012 - 22:25

Na aanleiding van je antwoord heb ik mijn code aangepast.

Ik heb een pagina gemaakt met een submenu hard coded werkt het
alleen op het moment dat ik het het laat genereren werkt mijn submenu niet.

op het moment dat ik de broncode vergelijk met de hardcoded versie, kan ik het probleem niet vinden.

dit is de code die het menu genereert

HTML Code:
<!--
Deze code tekent de menu behorende aan de rol waar de gebruiker zich in bevindt.
Geupdate op:
door: *
wat:
gemaakt door *
gemaakt op 6-2-2012
versie 0.1
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR...nal.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/19...9/xhtml[/url]">
<head>
  <?php
   if(!isset($_SESSION))
   {
	SESSION_START(); //start indien nodig de sessie
   }
  ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="testcss2.css"/>
<title>Dorb Portal</title>
</head>
<?php  
   //maakt verbinding met de database
   include('connect.php');
   mysql_select_db($_SESSION['DB'], $con);
  
   //haalt gegevens op
   $result = mysql_query("
   select
	distinct(menuCategorieNm)
   from
	tblMenuStructuur,tblPaginas,tblMenucategorieën,tblRollen,tblrechten,tblGebruikers
   where
	tblMenuStructuur.menuStructuurPaginaId = tblPaginas.paginaId
   and tblMenuStructuur.menuStructuurCategorieId = tblMenuCategorieën.menuCategorieId
   and tblRechten.rechtPaginaId = tblPaginas.paginaId
   and tblRechten.rechtRolId = tblRollen.rolId
   and tblGebruikers.gebruikersRolId = tblRollen.rolId
   and tblGebruikers.gebruikersId = ".$_SESSION['gebruikerId']  
   );
   //sluit verbinding
   mysql_close();

//begint tekenen menu
echo '
	   <div class="menu">
   <ul>
  
	';

while($row = mysql_fetch_array($result))
{
  //escaped de gegevens opgehaald uit de database, voor ze verder gebruikt mogen worden
  $knopCategorie = mysql_escape_string($row['menuCategorieNm']);
  
  //tekend alle menu items die specifiek toegekend zijn aan de rol van de gebruiker
  echo ("
	<li><a href=''>".$knopCategorie."</a>
	");
  
	echo '<ul class="sub-menu">';
  
  
   include('connect.php');
   mysql_select_db($_SESSION['DB'], $con);
  
   //haalt gegevens op
   $menuInfo = mysql_query("
   select
	paginaNm,paginaUrl
   from
	tblMenuStructuur,tblPaginas,tblMenucategorieën,tblRollen,tblrechten,tblGebruikers
   where
	tblMenuStructuur.menuStructuurPaginaId = tblPaginas.paginaId
   and tblMenuStructuur.menuStructuurCategorieId = tblMenuCategorieën.menuCategorieId
   and tblRechten.rechtPaginaId = tblPaginas.paginaId
   and tblRechten.rechtRolId = tblRollen.rolId
   and tblGebruikers.gebruikersRolId = tblRollen.rolId
   and menuCategorieNm = '".$knopCategorie."'
   and tblGebruikers.gebruikersId = ".$_SESSION['gebruikerId']
   );
   //sluit verbinding
   mysql_close();
	
   while($row = mysql_fetch_array($menuInfo))
	{
	 $paginaNm =  mysql_escape_string($row['paginaNm']);
	 $paginaUrl = mysql_escape_string($row['paginaUrl']);
	
	 echo ("
	   <li>
		<a href='".$paginaUrl."'>
		 ".$paginaNm."
		</a>
	   </li>
	  ");
	}
  
   echo "</ul>";
  echo "</li>";	
}
?>
  </ul>
  <br style="clear:left"/>
</div>
</body>
</html>


en dit is de code die wel werkt

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR...nal.dtd[/url]">
<html>
<head>
<title> whatever:hover cssmenu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="testcss2.css"/>
</head>
<body>
<div class="menu">
  <ul>
   <li><a href="#">knop1</a>
	
	<ul class="sub-menu">
	 <li><a href="#">Pages</a></li>
	 <li><a href="#">Archives</a></li>
	</ul>
   </li>
  
   <li><a href="#">knop2</a>
	
	<ul class="sub-menu">
	 <li><a href="#">Pages</a></li>
	 <li><a href="#">Archives</a></li>
	 <li><a href="#">hoera</a></li>
	</ul>
   </li>
  
  </ul>
  
  <br style="clear:left"/>
</div>
</body>
</html>


en de css
HTML Code:
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
.menu {
position: relative;
margin-left: 30px;
}
.menu a {
display: block;
width: 100px;
}
.menu ul {
list-style-type: none;
padding-top: 5px;
}
.menu li {
float: left;
position: relative;
padding: 3px 0;
text-align: center;
}
.menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
.menu ul.sub-menu li {
text-align: left;
}
.menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}


met vriendelijke groet,

#4 pascalbianca

pascalbianca

    Webmaster/Admin

  • Webmaster
  • 4382 berichten
    Laatst bezocht 26 nov 2018 06:49
  • LocatieSusteren, Nederland, Midden Limburg.
Inzender

Geplaatst op 08 februari 2012 - 23:11

Als ik het zo bekijk dwarrelt het even voor mij ogen , tis moeilijk te zien.
Zie ook dat je link naar eigen db met een cofig file, dus die code regelrecht testen word moeilijk of je zou het geheel even compleet moet zippen/rarren en hier plaatsen.

#5 badboyqxy

badboyqxy

    Master Developer

  • Leden
  • PipPipPipPipPip
  • 505 berichten
    Laatst bezocht 08 sep 2014 22:14

Geplaatst op 09 februari 2012 - 14:49

http://www.2shared.c...l_Dorb_v01.html
Hierbij een link om het project te downloaden

het gaat om testmenu.php en menu2.php
testccs2.css

#6 badboyqxy

badboyqxy

    Master Developer

  • Leden
  • PipPipPipPipPip
  • 505 berichten
    Laatst bezocht 08 sep 2014 22:14

Geplaatst op 09 februari 2012 - 18:27

ik weet niet hoe het kan maar door het menu te includen is het probleem verholpen





Ook met taq Solved, menu, verticaal, horizontaal voorzien

0 gebruiker(s) lezen dit onderwerp

0 lid(leden), 0 bezoeker(s), 0 anonieme gebruikers

Inloggen


[Solved] Untitled 1

Met dank aan Jürgen voor de jarenlange inzet van visualbasic.be (anno dec 2000)
Met dank aan Mike en Ronneke voor de jarenlange inzet van vbib.be (anno dec 2010)
Met dank aan PascalBianca voor de jarenlange inzet van vbib.be (anno dec 2016)