Карта сайта Kansoftware
НОВОСТИУСЛУГИРЕШЕНИЯКОНТАКТЫ
KANSoftWare

Меню навигации по сайту

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>

 

Автор KAN

Перевод:

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

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

Улучшения JavaScript:

  1. Вместо определения отдельных функций для MM_reloadPage и findObj, рассмотрите возможность объединить их в одну функцию, которая обрабатывает оба задачи.
  2. В функции showHideLayers используйте Array.prototype.forEach() для перебора массива аргументов вместо традиционного цикла for.

Улучшения HTML:

  1. Используйте семантические элементы HTML5 вместо устаревших тегов HTML 4.01 transitional (например, <div> вместо <layer>).
  2. Рассмотрите добавление атрибутов ARIA для улучшения доступности для экранных читателей и других вспомогательных технологий.
  3. Вместо использования inline-JavaScript-обработчиков событий, рассмотрите возможность отделить код JavaScript от разметки HTML и использовать слушатели событий.

Организация кода:

  1. Организуйте код JavaScript в отдельных файлах или модулях для лучшей поддерживаемости и повторного использования.
  2. Рассмотрите использование современного фреймворка или библиотеки JavaScript для упрощения процесса разработки.

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

<!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




Материалы статей собраны из открытых источников, владелец сайта не претендует на авторство. Там где авторство установить не удалось, материал подаётся без имени автора. В случае если Вы считаете, что Ваши права нарушены, пожалуйста, свяжитесь с владельцем сайта.


:: Главная :: javascript в html ::

реклама
©KANSoftWare (разработка программного обеспечения, создание программ, создание интерактивных сайтов), 2007
Top.Mail.Ru

Время компиляции файла: 2024-12-22 20:14:06
2025-07-04 05:46:09/0.0067598819732666/0