• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsiv Template verschidene links unter einem Button

L

lapos79

Neues Mitglied
Hallo , ich habe ein Responsiv Template und möchte gerne das wenn jemand auf einen gewissen linkbutton klickt sich auf dem smartphone oder tablet ein anderer link öffnet als in der desktopvariante. Der Hintergrund liegt darin das in der "mobilvariante" also wenn das template zusammengeschoben ist, web apps für die links vorhanden sind.
Hat da jemand eine idee wie man das macht?
 
Hallo,

es gibt verschiedene Möglichkeiten. Ich bevorzuge das aktuelle HTML5 / CSS3 mit dem Flexbox-Modell. Weiterhin bevorzuge ich die User darauf hinzuweisen auf was für einen Link sie klicken. in diesem Fall also, falls sie auf eine App geleitet werden. Allzuviele Informationen hast du uns leider auch nicht gegeben. Ich würde das also so lösen:

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Wechsel-Navigation</title>
   <meta name="description" content="Wechsel-Navigation">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 100%;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      body {
         padding: 0;
      }
      p {
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
      }
      li {
         display: block;
         text-align: center;
         list-style-type: none;
         padding: 0.5rem 1rem;
         border: 2px solid red;
         border-radius: 0.5rem;
         margin: 0.5rem;
         flex: 1;
      }
      li:hover {
         background-color: red;
         color: white;
      }
      li:nth-child(3),
      li:nth-child(5),
      li:nth-child(9) {
         display: none;
      }
   @media only screen and (max-width: 850px) {
      li:nth-child(2),
      li:nth-child(4),
      li:nth-child(8) {
         display: none;
      }
      li:nth-child(3),
      li:nth-child(5),
      li:nth-child(9) {
         display: block;
      }
   }
   </style>
</head>
<body>
   <nav>
      <ul>
         <li>Banane</li>
         <li>Kiwi</li>
         <li>Kiwi App</li>
         <li>Erdbeere</li>
         <li>Erdbeere App</li>
         <li>Kirsche</li>
         <li>Birne</li>
         <li>Ananas</li>
         <li>Ananas App</li>
      </ul>
   </nav>
</body>
</html>

Gruss

MrMurphy
 
das mit der navigation habe ich schon gelöst es geht mehr so um die links die im content verbaut sind.

hier mal der code vom menu
Code: 
<!DOCTYPE HTML>
<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
<script src="js/back-to-top.js"></script>
<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css" />
        <!--nav-->
<script>
        $(function() {
            var pull         = $('#pull');
                menu         = $('nav ul');
                menuHeight    = menu.height();

            $(pull).on('click', function(e) {
                e.preventDefault();
                menu.slideToggle();
            });

            $(window).resize(function(){
                var w = $(window).width();
                if(w > 320 && menu.is(':hidden')) {
                    menu.removeAttr('style');
                }
            });
        });
</script>
</head>
<body>
<!-- start header -->
<div class="header_bg">
<div class="wrap">
    <div class="header">
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt=""></a>
        </div>
        <div class="h_right">
            <!--start menu -->
            <ul class="menu">
                <li><a href="index.html">Start</a></li> |
                <li><a href="wohnungen.html">Wohnungen</a></li> |
                <li class="active"><a href="buchung.html">Online Buchung</a></li> |
                <li><a href="webcam.html">Webcam</a></li> |
                <li><a href="kontakt.php">Kontakt</a></li>
                <div class="clear"></div>
            </ul>
           
        </div>
        <div class="clear"></div>
        <div class="top-nav">
        <nav class="clearfix">
                <ul>
                <li class="active"><a href="index.html">Start</a></li>
                <li><a href="wohnungen.html">Wohnungen</a></li>
                <li><a href="buchung.html">Online Buchung</a></li>
                <li><a href="webcam.html">Webcam</a></li>
                <li><a href="kontakt.php">Kontakt</a></li>
                </ul>
                <a href="#" id="pull">Menu</a>
            </nav>
        </div>
    </div>
</div>
</div>
<!--start main -->
 
ich hab es jetzt gelöst mit einem jquery script

HTML: 
<script>
$(document).ready(function(){
if ($(window).width() < 752) {         // wenn display kleiner als wert (752)
$("#die_id_vom_link").attr("href", "http://.....de")
}
});
</script>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben