Responsiv Template verschidene links unter einem Button

html.de-Forum HTML, XHTML & CSS
1

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?

2

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]

Wechsel-Navigation * { -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; } }
  • Banane
  • Kiwi
  • Kiwi App
  • Erdbeere
  • Erdbeere App
  • Kirsche
  • Birne
  • Ananas
  • Ananas App
[/CODE]

Gruss

MrMurphy

3

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]

Menu 
    </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>
[/CODE]
4

ich hab es jetzt gelöst mit einem jquery script

[HTML][/HTML]