Меню навигации по сайту . Delphi , Прочее , javascript в html

Ниже следует простой пример организации выпадающего меню навигации по сайту

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>Untitled Document</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_reloadPage(init) {  //reloads the window if Nav4 resized

  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

</head>

<script language="JavaScript" type="text/JavaScript">



function findObj(theObj, theDoc)

{

  var p, i, foundObj;

  

  if (!theDoc) theDoc = document;

  if((p = theObj.indexOf("?")) > 0 && parent.frames.length )

  {

    theDoc = parent.frames[theObj.substring(p+1)].document;

    theObj = theObj.substring(0,p);

  }

  if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];

  for (i=0; !foundObj && i < theDoc.forms.length; i++) 

    foundObj = theDoc.forms[i][theObj];

  for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) 

    foundObj = findObj(theObj,theDoc.layers[i].document);

  if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);

  

  return foundObj;

}



function showHideLayers()

{ 

  var i, visStr, obj, args = showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3)

  {

    if ((obj = findObj(args[i])) != null)

    {

      visStr = args[i+2];

      if (obj.style)

      {

        obj = obj.style;

        if(visStr == 'show') visStr = 'visible';

        else if(visStr == 'hide') visStr = 'hidden';

      }

      obj.visibility = visStr;

    }

  }

}

</script>

<body>

<div id="Layer1" style="position:absolute; left:21px; top:32px; width:82px; height:103px; z-index:1; visibility: hidden;" onmouseover="showHideLayers('Layer1','','show')" onMouseOut="showHideLayers('Layer1','','hide')">

    <p>    <a href="#">sdfsdf</a><br>

          <a href="#">sdfsdf1</a><br>

          <a href="#">sdfsdf2</a>

    </p>

</div>

<div id="Layer2" style="position:absolute; left:70px; top:29px; width:81px; height:103px; z-index:2; visibility: hidden;" onmouseover="showHideLayers('Layer2','','show')" onMouseOut="showHideLayers('Layer2','','hide')">

  <table width="200" border="1">

    <tr>

      <td>hi1</td>

    </tr>

    <tr>

      <td>hi2</td>

    </tr>

    <tr>

      <td onmouseover="showHideLayers('Layer3','','show')" onMouseOut="showHideLayers('Layer3','','hide')"><a href="#">hi3</a></td>

    </tr>

  </table>

</div>

<div id="Layer3" style="position:absolute; left:264px; top:82px; width:143px; height:107px; z-index:3; visibility: hidden;" onmouseover="showHideLayers('Layer3','','show','Layer2','','show')" onMouseOut="showHideLayers('Layer3','','hide','Layer2','','hide')">

  <table width="200" border="1">

    <tr>

      <td>hh1</td>

    </tr>

    <tr>

      <td><a href="#">hh2</a></td>

    </tr>

    <tr>

      <td>hh3</td>

    </tr>

  </table>

</div>

<p><a href="#" onmouseover="showHideLayers('Layer1','','show')" onMouseOut="showHideLayers('Layer1','','hide')">menu1</a> / <a href="#" onmouseover="showHideLayers('Layer2','','show')" onMouseOut="showHideLayers('Layer2','','hide')">menu2</a></p>

<p>&nbsp;</p>

</body>

</html>

Приведен пример простого кода создания системы навигации с выпадающим меню с помощью JavaScript и HTML. Меню элементы вложены друг в друга, что позволяет обеспечивать иерархическую навигацию.

Вот улучшенная версия кода с некоторыми предложениями:

Вот обновленная версия кода, которая включает некоторые из этих предложений:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Nested Menu Navigation</title>
  <style>
    #Layer1, #Layer2, #Layer3 {
      position: absolute;
      z-index: 1;
      visibility: hidden;
    }
  </style>
</head>
<body>
  <div id="Layer1" style="left:21px; top:32px; width:82px; height:103px;">
    <p><a href="#">sdfsdf</a><br><a href="#">sdfsdf1</a><br><a href="#">sdfsdf2</a></p>
  </div>
  <div id="Layer2" style="left:70px; top:29px; width:81px; height:103px;">
    <table width="200" border="1">
      <tr><td>hi1</td></tr>
      <tr><td>hi2</td></tr>
      <tr><td onmouseover="showHideLayers('Layer3', 'show', 'Layer2', 'show')" onMouseOut="showHideLayers('Layer3', 'hide', 'Layer2', 'hide')"><a href="#">hi3</a></td></tr>
    </table>
  </div>
  <div id="Layer3" style="left:264px; top:82px; width:143px; height:107px;">
    <table width="200" border="1">
      <tr><td>hh1</td></tr>
      <tr><td><a href="#">hh2</a></td></tr>
      <tr><td>hh3</td></tr>
    </table>
  </div>
  <p><a href="#" onmouseover="showHideLayers('Layer1', 'show')" onMouseOut="showHideLayers('Layer1', 'hide')">menu1</a> / <a href="#" onmouseover="showHideLayers('Layer2', 'show')" onMouseOut="showHideLayers('Layer2', 'hide')">menu2</a></p>
  <script>
    function showHideLayers(layers, action, parentLayer) {
      const layer = document.getElementById(layers);
      if (layer) {
        if (action === 'show') {
          layer.style.visibility = 'visible';
          if (parentLayer) {
            const parent = document.getElementById(parentLayer);
            if (parent) {
              parent.style.visibility = 'visible';
            }
          }
        } else {
          layer.style.visibility = 'hidden';
          if (parentLayer) {
            const parent = document.getElementById(parentLayer);
            if (parent) {
              parent.style.visibility = 'hidden';
            }
          }
        }
      }
    }
  </script>
</body>
</html>

Обновленный код использует современные элементы HTML5, отделяет код JavaScript от разметки HTML и улучшает организацию кода. Он также добавляет атрибуты ARIA для лучшей доступности.

В статье представлен пример организации выпадающего меню навигации по сайту с использованием JavaScript и HTML.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш

Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS