Last active
December 16, 2015 06:59
-
-
Save valdiney/5395121 to your computer and use it in GitHub Desktop.
Autor: Valdiney França.
Menu alimentado via class em php!
Este menu foi criado com o intuito de estudar sobre a linguagem php dinamizando o conteúdo do mesmo, porém o processo realizado neste exemplo requer muito trabalho eu creio. Algo que poderia ter sido feito com poucas linhas de html, agora contem muitas linhas envolvendo o php. O important…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Menu com php oop</title> | |
| <script language="javascript" src="js/jquery-1.6.4.min.js"></script> | |
| <script language="javascript" src="js/menu.js"></script> | |
| <link rel="stylesheet" href="css/style.css"></style> | |
| <?php | |
| include"includ/class_menu.php"; | |
| $menu = new Menu();//Instanciando o objeto | |
| ?> | |
| </head> | |
| <body> | |
| <ul id="menu"> | |
| <li><a href="<?php echo $menu->link1; ?>"><?php echo $menu->texto1; ?></a></li> | |
| <li><a class="tem_sub" href="<?php echo $menu->link2; ?>"><?php echo $menu->texto2; ?></a> | |
| <ul id="sub"> | |
| <li><a href="<?php echo $menu->link2_sub1; ?>"><?php echo $menu->texto2_sub1; ?></a></li> | |
| <li><a href="<?php echo $menu->link2_sub2; ?>"><?php echo $menu->texto2_sub2; ?></a></li> | |
| </ul><!--end ul sub--> | |
| </li><!--end li sub--> | |
| <li><a class="tem_sub" href="<?php echo $menu->link3; ?>"><?php echo $menu->texto3; ?></a> | |
| <ul id="sub"> | |
| <li><a href="<?php echo $menu->link3_sub1; ?>"><?php echo $menu->texto3_sub1; ?></a></li> | |
| <li><a href="<?php echo $menu->link3_sub2; ?>"><?php echo $menu->texto3_sub2; ?></a></li> | |
| </ul><!--end ul sub--> | |
| </li><!--end li sub--> | |
| <li><a href="<?php echo $menu->link4; ?>"><?php echo $menu->texto4; ?></a></li> | |
| </ul> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /* | |
| Class menu disponibiliza todos os textos e links | |
| para alimentar o menu estruturado em html, estilizado em css e manipulado via javascript | |
| */ | |
| class Menu{ | |
| public $texto1 = " Inicio "; | |
| public $link1 = " index.php"; | |
| public $texto2 = " Empresa "; | |
| public $link2 = " empresa.php "; | |
| public $texto2_sub1 = " Telecomunicações"; | |
| public $link2_sub1 = " Telecomunicacoes.php"; | |
| public $texto2_sub2 = " Engenharia civil "; | |
| public $link2_sub2 = " engenharia.php"; | |
| /*------------------------------------------*/ | |
| public $texto3 = " Trabalhos "; | |
| public $link3 = " trabalhos.php "; | |
| public $texto3_sub1 = " Tecnico em manutenção de Micro "; | |
| public $link3_sub1 = " tecnico_micro.php"; | |
| public $texto3_sub2 = " Telemarketing "; | |
| public $link3_sub2 = " telemarketing.php "; | |
| /*------------------------------------------*/ | |
| public $texto4 = " Contatos"; | |
| public $link4 = " contatos.php "; | |
| } | |
| ?> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| #menu a:hover{ | |
| opacity:0.70!important; | |
| } | |
| #menu li ul{ | |
| display:none; | |
| } | |
| */ | |
| /*Estização do menu logo abaixo*/ | |
| ul{ | |
| margin:0px; | |
| padding:0px; | |
| list-style:none; | |
| } | |
| /* ul do menu pai*/ | |
| #menu{ | |
| padding:10px; | |
| background-color:lightblue; | |
| width:250px; | |
| } | |
| #menu a{ | |
| display:block; | |
| width:auto; | |
| text-decoration:none; | |
| padding:5px; | |
| border-bottom:1px dotted silver; | |
| background-color:white; | |
| color:black; | |
| font-family:candara; | |
| } | |
| #menu li:hover ul{ | |
| display:block; | |
| } | |
| #menu li:hover a{/*Pai quando ativo*/ | |
| opacity:0.70; | |
| } | |
| #menu li a:before{ | |
| content:url(img_config/icon_menu.png); | |
| margin-right:10px; | |
| } | |
| .tem_sub{ | |
| font-weight:bold; | |
| } | |
| #sub a{ | |
| background-color:#ffffcc; | |
| font-size:13px; | |
| } | |
| #sub a:hover{ | |
| opacity:0.80!important; | |
| } | |
| #sub a:before{ | |
| content:url(img_config/icon_submenu.png)!important; | |
| margin-right:5px; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| [A]....Oculta a sub-lista (hide = esconder ) | |
| [B]....Quando o mouse se encontrar encima de uma “li” que contenha um filho “ul” | |
| a função é disparada, fazendo com que a sub-lista seja visível. | |
| (slideDown = Deslize para baixo ) | |
| [C]....Realiza a mesma função da codificação [B] onde a única diferença | |
| é na função “slideUp” faz com que a sub-lista seja escondida assim que o mouse não | |
| estiver encima da “li” que contem um filho “ul”.(slideUp = deslizar para cima) | |
| */ | |
| $(document).ready(function(){ | |
| /*[A].......*/ | |
| $("#menu li ul").hide(); | |
| /*[B].......*/ | |
| $("#menu li").hover( | |
| function(){ | |
| $(this).children("ul").slideDown('slow'); | |
| }, | |
| /*[C].......*/ | |
| function(){ | |
| $(this).children("ul").slideUp('slow'); | |
| } | |
| ); | |
| });//end jQuery |
Opa valeu man pelas dicas. Estou a esperar o exemplo que mencionastes em html5
Passa mesmo que fiquei meio perdido agora kkk
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
vladiney HTML5 dispensa o atributo language na tag script, passa na APA vou passar um templante HTML5 com detalhes