En la página de Login cambias a la página de Marcación, si el inicio de sesión es correcto.

```js
 window.location.href = "marcación.html";
```

Mi sugeriencia es solicitar las opciones del menú después de cargar la página. Por ejemplo, creamos un archivo **comun.js** y vinculamos este archivo con las páginas de Marcación, Registro y Verificación.

```html
<script src="../js/comun.js"></script>
```

Contenido de **comun.js**:
```js

// Cuando finaliza la carga del documento,
// solicitamos opciones del menú para el rol A 
$(document).ready(function() {
    $.getJSON("http://.........", {rol: "A"})
        .done(function(jsonArray) {
            // He puesto el nombre de jsonArray porque en este caso tu servicio
            // devuelve un JSON Array que contiene elementos de tipo JSON Object.
            // Por tanto, debes saber la estructura de tu JSON para extraer
            // la propiedad opc_html.

            var $ul = $('#menu nav ul');
            $.each(jsonArray, function(i, opcion) {
                $ul.append(opcion.opc_html);
            });
            // Añadimos el enlace de "salir"
            $ul.append('<li><a href="#">salir</a></li>');
        })
        .fail(function(jqxhr, textStatus, error) {
            var err = textStatus + ", " + error;
            console.log("Error al obtener opciones del menú: " + err);
        });

});
```

Nota que añadimos el botón "Salir" dinámicamente, por tanto puedes retirar ese código HTML en las 3 páginas. El código HTML del menú queda así:

```html
<div id="menu" class="menu">
  <img src="../img/QG-marca-principal.png" alt="">
  <nav>
    <ul>
    </ul>
  </nav>
</div>
```

Esta es una posibilidad. Hay otras alternativas para este mismo código como:
- Usar $.insertBefore() para insertar nuevos enlaces justo antes del botón "Salir". Así no quitas el código HTML del botón "Salir".
- No esperar a la carga completa del documento HTML. Puedes ejecutar directamente `$.getJSON()` justo después de cargar el código HTML del menú. Esto es posible porque el API jQuery está ya cargado (se cargó durante la carga del header).

Te dejo a ti 2 asuntos:
- Pasar el valor del rol correcto (ya sea recuperándolo de otra petición, del almacenamiento local (local storage), de un parámetro de URL, etc).
- Indicar la URL correcta para la petición.

### Ejemplo de $.each() con un JSON Array

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var $jsonArray = JSON.parse('[{"opc_html":"<li>Marcación</li>"}, {"opc_html":"<li>Verificación</li>"}, {"opc_html":"<li>Registro</li>"}]');
    $.each($jsonArray, function(i, opcion){
      console.log(opcion.opc_html);
    });

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!-- end snippet -->

### Referencias
- [$.getJSON()][1]


  [1]: https://api.jquery.com/jquery.getjson/