Важная информация
Показано с 1 по 4 из 4

Тема: Активный пункт меню

  1. #1 Активный пункт меню 
    Новичок
    Регистрация
    09.07.2017
    Сообщений
    3
    Сказал(а) спасибо
    1
    Поблагодарили 3 раз(а) в 1 сообщении
    Мужики выручайте!!! Весь инет перелазил. Я в javascript не понимаю но хочу сделать активный пункт меню Вот код сайта:

    index.php

    PHP Code:
    1. <?php
    2.  
    3. if(![Ссылки могут видеть только зарегистрированные пользователи. ]($_GET['id']))
    4. {
    5. $index_title = "Главная";
    6. }
    7. else
    8. {
    9. [Ссылки могут видеть только зарегистрированные пользователи. ]("localhost", "business1", "david1");
    10. [Ссылки могут видеть только зарегистрированные пользователи. ]("business1");
    11.  
    12. $index_result = [Ссылки могут видеть только зарегистрированные пользователи. ]("SELECT caption FROM business1 WHERE alias = '$_GET[id]'");
    13.  
    14. if([Ссылки могут видеть только зарегистрированные пользователи. ]($index_result) == 0)
    15. {
    16. $index_title = "Неизвестная страница";
    17. }
    18. else
    19. {
    20. $index_row = [Ссылки могут видеть только зарегистрированные пользователи. ]($index_result);
    21.  
    22. $index_title = [Ссылки могут видеть только зарегистрированные пользователи. ]($index_row['caption']);
    23.  
    24. [Ссылки могут видеть только зарегистрированные пользователи. ]();
    25. }
    26. }
    27.  
    28. ?>


    HTML Code:
    1. <!doctype html>
    2. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    3. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    4. <[Ссылки могут видеть только зарегистрированные пользователи. ] charset="utf-8">
    5. <[Ссылки могут видеть только зарегистрированные пользователи. ]><?php echo $index_title; ?></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    6.  
    7. <[Ссылки могут видеть только зарегистрированные пользователи. ] rel="stylesheet" type="text/css" href="css/style.css">
    8.  
    9. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    10.  
    11. <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    12.  
    13. <?php require("template/mail-us.php");?>
    14.  
    15. <?php require("template/logo.php"); ?>
    16.     
    17.     <?php require("template/menu.php"); ?>
    18.     
    19.     <?php require("template/news.php"); ?>
    20.     
    21.     <?php require("template/header-right.php"); ?>
    22.     
    23.     <?php require("template/right-content.php"); ?>
    24.     
    25.     <?php require("template/footer.php"); ?>
    26.  
    27. </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    28. </[Ссылки могут видеть только зарегистрированные пользователи. ]>


    само меню:

    HTML Code:
    1. <!--menu-->
    2.             <[Ссылки могут видеть только зарегистрированные пользователи. ] class="menu">
    3.             
    4.              <[Ссылки могут видеть только зарегистрированные пользователи. ]>
    5.                  <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] href="index.php"><[Ссылки могут видеть только зарегистрированные пользователи. ] src="http://iforum.pro/images/menu-arrow.png">Главная</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    6.                     <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] href="index.php?id=link2"><[Ссылки могут видеть только зарегистрированные пользователи. ] src="http://iforum.pro/images/menu-arrow.png">Link 2</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    7.                     <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] href="index.php?id=link3"><[Ссылки могут видеть только зарегистрированные пользователи. ] src="http://iforum.pro/images/menu-arrow.png">Link 3</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    8.                     <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] href="index.php?id=link4"><[Ссылки могут видеть только зарегистрированные пользователи. ] src="http://iforum.pro/images/menu-arrow.png">Link 4</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    9.                     <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] href="index.php?id=link5"><[Ссылки могут видеть только зарегистрированные пользователи. ] src="http://iforum.pro/images/menu-arrow.png">Link 5</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    10.                     <[Ссылки могут видеть только зарегистрированные пользователи. ]><[Ссылки могут видеть только зарегистрированные пользователи. ] href="index.php?id=link6"><[Ссылки могут видеть только зарегистрированные пользователи. ] src="http://iforum.pro/images/menu-arrow.png">Link 6</[Ссылки могут видеть только зарегистрированные пользователи. ]></[Ссылки могут видеть только зарегистрированные пользователи. ]>
    11.                 </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    12.             
    13.             </[Ссылки могут видеть только зарегистрированные пользователи. ]>
    14.             <!--/menu-->


    вот css:

    CSS Code:
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. *{
    5. padding:0px;
    6. margin:0px;
    7. }
    8.  
    9. h1, h2, h3, h4, h5, h6{
    10. color:#000000;
    11. font-family:"Trebuchet MS", Arial, sans-serif, Verdana;
    12. }
    13.  
    14. ul{
    15. list-style:none;
    16. }
    17.  
    18. html{
    19. min-height:100%;
    20. }
    21.  
    22. body{
    23. background:linear-gradient(to bottom, #003760, #00599d) no-repeat;
    24. color:#2e0067;
    25. font-size:14px;
    26. font-family:Arial, sans-serif, Verdana;
    27. }
    28.  
    29. /*------frame------*/
    30. .frame{
    31. overflow:hidden;
    32. max-width:1000px;
    33. margin:0px auto;
    34. }
    35.  
    36. /*------left-hand-side------*/
    37. .left-hand-side{
    38. float:left;
    39. width:34%;
    40. }
    41.  
    42. /*------mail-us------*/
    43. .mail-us{
    44. text-align:center;
    45. padding:20px 0px;
    46. }
    47.  
    48. .mail-us a{
    49. text-decoration:none;
    50. color:#ffffff;
    51. }
    52.  
    53. .mail-us a:hover{
    54. color:#ff4800;
    55. }
    56.  
    57. .mail-us a img{
    58. margin-left:5px;
    59. vertical-align:middle;
    60. }
    61.  
    62. /*------logo------*/
    63. .logo{
    64. padding:30px 0px;
    65. background:linear-gradient(to bottom, #eaf5f9, #2a8cc1);
    66. border:2px solid #62afd9;
    67. border-right:none;
    68. border-radius:10px 0px 0px 10px;
    69. }
    70.  
    71. .logo a{
    72. text-decoration:none;
    73. }
    74.  
    75. .logo a h1{
    76. font-weight:none;
    77. font-style:italic;
    78. text-align:center;
    79. }
    80.  
    81. /*------menu------*/
    82. .menu{
    83. margin:10px 0px 38px 0px;
    84. font-size:18px;
    85. }
    86.  
    87. .menu ul li a img{
    88. margin-right:10px;
    89. vertical-align:central;
    90. }
    91.  
    92. .menu ul li a{
    93. display:block;
    94. text-decoration:none;
    95. font-style:italic;
    96. background:#2772ac;
    97. color:#ffffff;
    98. padding:5px 0px 5px 20px;
    99. margin:0px 20px 5px 0px;
    100. border-radius:5px;
    101. }
    102.  
    103. .menu ul li a:hover{
    104. margin:0px 0px 5px 20px;
    105. text-decoration:underline;
    106. }
    107.  
    108. /*------news------*/
    109. .news{
    110. background:#1a639a;
    111. padding:15px;
    112. }
    113.  
    114. .news h2{
    115. font-style:italic;
    116. color:#ffc655;
    117. margin-bottom:10px;
    118. }
    119.  
    120. .news p{
    121. color:#ffffff;
    122. }
    123.  
    124. /*------right-hand-side------*/
    125. .right-hand-side{
    126. float:right;
    127. width:66%;
    128. }
    129.  
    130. /*------header-right------*/
    131. .header-right img{
    132. display:block;
    133. max-width:100%;
    134. }
    135.  
    136. /*------right-content------*/
    137. .right-content{
    138. background:#ccdeec;
    139. padding:20px;
    140. }
    141.  
    142. .right-content h2{
    143. margin-bottom:15px;
    144. }
    145.  
    146. .right-content p{
    147. margin-bottom:15px;
    148. }
    149.  
    150. /*------footer------*/
    151. .footer{
    152. display:block;
    153. text-align:center;
    154. color:#ffffff;
    155. padding:10px 0px;
    156. }
    157.  
    158. .footer>a{
    159. color:#ffffff;
    160. margin:0px 10px 0px 9px;
    161. }
    162.  
    163. .footer>a:hover{
    164. color:#ff4800;
    165. }
    166.  
    167. .footer p a{
    168. color:#ffffff;
    169. }
    170.  
    171. .footer p a:hover{
    172. color:#ff4800;
    173. }
    174.  
    175. .footer p{
    176. margin:10px 0px 0px 0px;
    177. }
    178.  
    179. /*------form-mail-us------*/
    180. .form-mail-us{
    181. margin:0px 15%;
    182. }
    183.  
    184. .form-mail-us form label{
    185. display:block;
    186. margin-bottom:5px;
    187. }
    188.  
    189. .form-mail-us form label input{
    190. display:block;
    191. width:100%;
    192. padding:3px 3px;
    193. }
    194.  
    195. .form-mail-us form label textarea{
    196. display:block;
    197. width:100%;
    198. padding:3px 3px;
    199. height:300px;
    200. }
    201.  
    202. .form-mail-us form div{
    203. margin:0px 25%;
    204. }
    205.  
    206. .form-mail-us form>input{
    207. margin-top:15px;
    208. padding:5px 5px;
    209. }
    210.  
    211. /*------error-form------*/
    212. .error-form p{
    213. background:#ff4800;
    214. color:#ffffff;
    215. text-align:center;
    216. border-top:2px solid #5a00ff;
    217. border-bottom:2px solid #5a00ff;
    218. padding:10px 0px;
    219. }


    Перепробывал все и jqury и просто javascript ничего не получается. Вообще спасибо тому кто поможет пожалуйста!!!!!!
    Последний раз редактировалось >Quiet Snow<; 17.07.2017 в 06:22. Причина: Теги
    Ответить с цитированием  
     

  2. #2  
    Администратор Аватар для rovico
    Регистрация
    17.04.2014
    Адрес
    Ярославль
    Сообщений
    245
    Сказал(а) спасибо
    17
    Поблагодарили 287 раз(а) в 162 сообщениях
    Записей в блоге
    2
    А при чём тут JS?

    В CSS вот пункт при наведении:

    CSS Code:
    1. .menu ul li a:hover{
    2. margin:0px 0px 5px 20px;
    3. text-decoration:underline;
    4. }


    Поменяй его на

    CSS Code:
    1. .menu ul li a.active,
    2. .menu ul li a:hover{
    3. margin:0px 0px 5px 20px;
    4. text-decoration:underline;
    5. }


    Добавь в ПХП метод, который будет проверять активный пункт или нет. Например хоть так:
    PHP Code:
    1.  
    2. function isActiveMenuItem($url) {
    3.     $activeItem = $_SERVER['REQUEST_URI']; // Это очень грубое определение, но в переменную запишется текущий адрес со слеша
    4.     return $url === $activeItem; // Тут как-то сравнивать. Может потребоваться trim сделать от слешей, например или регулярку написать
    5. }


    Вынеси все пункты меню в массив:

    PHP Code:
    1. $items = [
    2.     [
    3.         'url' => '/index.php',
    4.         'icon' => 'http://iforum.pro/images/menu-arrow.png',
    5.         'text' => 'Главная'
    6.     ],
    7.     [
    8.         'url' => '/index.php?id=link2',
    9.         'icon' => 'http://iforum.pro/images/menu-arrow.png',
    10.         'text' => 'Link 2'
    11.     ] // И т.д.
    12. ];


    В шаблоне сделай набор через цикл (если используешь шаблонизатор, то его цикл и используй, а не пхпшный)
    PHP Code:
    1.     <!--menu-->
    2.                 <div class="menu">
    3.                 
    4.                  <ul>
    5.                  <?php foreach ($items as $item) {
    6.                      echo '<li><a href="' . $item['url'] . '" class="' . (isActiveMenuItem($item['url']) ? 'active' : '') . '"><img src="'. $item['icon'] . '">'. $item['text'] . '</a></li>'
    7.                  } ?>
    8.                     </ul>
    9.                 
    10.                 </div>
    11.                 <!--/menu-->
    Ответить с цитированием  
     

  3. 3 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (17.07.2017), Free Admin (18.07.2017), recingf1002 (18.07.2017)

  4. #3  
    Новичок
    Регистрация
    09.07.2017
    Сообщений
    3
    Сказал(а) спасибо
    1
    Поблагодарили 3 раз(а) в 1 сообщении
    Rovico. Спасибо сделаю, разберусь)))) А с эти js совсем голову сломал!!!
    Ответить с цитированием  
     

  5. #4  
    Новичок
    Регистрация
    09.07.2017
    Сообщений
    3
    Сказал(а) спасибо
    1
    Поблагодарили 3 раз(а) в 1 сообщении
    Все сделал!!!!!! Спасибо Rovico!!!! Вот выложу код может кому тоже пригодиться!!!!

    Меню:

    PHP Code:
    1. <?php
    2.  
    3. [Ссылки могут видеть только зарегистрированные пользователи. ]("localhost", "business1", "david1");
    4. [Ссылки могут видеть только зарегистрированные пользователи. ]("business1");
    5. $menu_result = [Ссылки могут видеть только зарегистрированные пользователи. ]("SELECT * FROM business1_menu");
    6. while($menu_row = [Ссылки могут видеть только зарегистрированные пользователи. ]($menu_result))
    7. {
    8. $menu[$menu_row['id']] = [Ссылки могут видеть только зарегистрированные пользователи. ]('title' => $menu_row['title'], 'link' => $menu_row['link']);
    9. }
    10.  
    11. [Ссылки могут видеть только зарегистрированные пользователи. ]();
    12.  
    13. ?>
    14. <!--menu-->
    15.             <div class="menu">
    16.             
    17.              <ul>
    18.                     <?php
    19.                     
    20. for($i = 1; $i <= [Ссылки могут видеть только зарегистрированные пользователи. ]($menu); $i++)
    21. {
    22. if([Ссылки могут видеть только зарегистрированные пользователи. ]($_SERVER['REQUEST_URI'], "/") == $menu[$i]['link'])
    23. {
    24. echo '<li><a href="'. $menu[$i]['link'] .'" class="active"><img src="images/menu-arrow.png">' . $menu[$i]['title'] . '</a></li>';
    25. }
    26. else
    27. {
    28. echo '<li><a href="'. $menu[$i]['link'] .'"><img src="images/menu-arrow.png">' . $menu[$i]['title'] . '</a></li>';
    29. }
    30. }
    31.  
    32. ?>
    33.                 </ul>
    34.             
    35.             </div>
    36.             <!--/menu-->


    И css:

    .menu ul li a.active{
    margin:0px 0px 5px 20px;
    text-decoration:underline;
    }
    Ответить с цитированием  
     

  6. 3 пользователя(ей) сказали cпасибо:

    >Quiet Snow< (19.07.2017), Free Admin (19.07.2017), rovico (19.07.2017)

Информация о теме
Пользователи, просматривающие эту тему

Эту тему просматривают: 1 (пользователей: 0 , гостей: 1)

Похожие темы

  1. Иероглифы в главном меню
    от Сионист в разделе C/C++
    Ответов: 0
    Последнее сообщение: 13.03.2017, 09:15
  2. Выпадающее меню с задержкой
    от Данила в разделе JavaScript
    Ответов: 0
    Последнее сообщение: 22.01.2014, 12:29
  3. DVD меню
    от Kakos_nonos в разделе Софт
    Ответов: 2
    Последнее сообщение: 07.01.2013, 11:27
  4. Помогите с меню
    от Vladislav в разделе HTML, CSS
    Ответов: 8
    Последнее сообщение: 23.10.2012, 19:57
  5. Програма Меню
    от motoded в разделе QBasic
    Ответов: 11
    Последнее сообщение: 05.08.2011, 02:21
Ваши права
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •