Navigation für Homepage

Hallo ihr, ich hab eine Frage: Wie kann ich bei einer 'Leiste' mithilfe von HTML, CSS oder JavaScript etwas machen, damit, wenn man mit der Maus daraufgeht eine auswahl entsteht?

Also hier:

<div id="templatemo_menu">
    <div class="home"><a href="http://bluetestpage.de.tl/"></a></div>
    <ul>
        <li><a href="http://bluetestpage.de.tl/Forum/index.htm">Hilfe?<span>Forum</span></a></li>

        <li><a href="http://blueservices.de.tl/Gilde.htm">Schau vorbei!<span>Gilde</span></a></li>

        <li><a href="http://blueservices.de.tl/Hotel-Blue.htm">Keine Unterkunft?<span>Hotel Blue</span></a></li>

         <li><a href="http://blueservices.de.tl/Blueshop.htm">Billiger gehts nicht!<span>Blueshop</span></a></li>

    </ul>       
</div> <!-- end of templatemo_menu -->

Lg Blue

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

Joecool73

01.07.2013, 13:17

Google mal: "Navigation animiert" ... da findest Du massig Beispiele!

Ähnliche Beiträge

Homepage-Baukasten, der HTML-Code ausspuckt

Hallo zusammen,

ich möchte eine eigene Homepage erstellen. Kenntnisse in HTML, CSS, JavaScript, PHP und MySQL sind zwar vorhanden, aber ich bin vor allem zu faul, den statischen Code (also HTML, CSS und JavaScript) zu schreiben, weil das so lange dauert. Außerdem bin ich im Designen nicht so gut. Deshalb wollte ich mir die Arbeit von einem Homepagebaukasten abnehmen lassen, der am Ende HTML-, CSS-, und JavaScript-Code ausspuckt, sodass ich hier am Design nichts mehr schreiben muss. Leider laufen die meisten Homepagebaukasten direkt im Browser (optimaler, aber nicht notwendig wäre ein Desktop-Programm) und vor allem gibt es bei den meisten nur die Möglichkeit, die Webseite direkt zu hosten, ohne dass der HTML-Code abrufbar ist (außer dann später, wenn die Webseite gehostet ist).

Meine Frage also: Kennt jemand einen Homepage-Baukasten, der direkt HTML-, CSS- und JavaScript-Code ausspuckt und einen nicht zwingt, die Seite direkt zu hosten, un der möglichst auf dem Desktop läuft?

Vielen Dank im Voraus und viele Grüße!

...zum Beitrag

Forum für Programmierer?

Hallo,

gibt es solche? Wenn geht für JavaScript/CSS/HTML

...zum Beitrag

WordPress - Logo direkt neben die Navigation einsetzen...?

Hallo zusammen,

ich würde gerne in WordPress mein Logo direkt neben die Navigation setzen. Nicht darüber oder darunter. Leider verzieht es das immer in der Ansicht. Ich habe auch schon versucht, das Logo zu verkleinern aber das klappt natürlich auch nicht. Ich kann leider den Bereich dafür im Code nicht finden, da ich nicht so der Experte in html und CSS bin.

Kann jmd. helfen und sagen wo genau das Bild eingefügt werden muss bzw. was ich zusätzlich noch im CSS abändern muss damit Bild und Navigation zusammen auf eine Höhe passen? Ich habe Online auch schon was gefunden, hilft mir aber auch nicht wirklich: https://wordpress.org/support/topic/to-make-menu-toggle-align-with-homepage-logo

Hat jmd. eine Idee??

Vielen Dank.

Theme Header (header.php)

div id="page" class="hfeed site"> <?php _e( 'Skip to content', 'argent' ); ?>

<header id="masthead" class="site-header" role="banner">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <img src = "http://138.201.91.49/wordpress/wp-content/uploads/2016/05/Logo-KopieV.1.2-2.png"/>
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php _e( 'Menu', 'argent' ); ?></button>

        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    <div class="site-branding">
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    </div><!-- .site-branding -->

...zum Beitrag

Navigation Bar in Html überdeckt zeilen-Wie kann ich das Beheben?

Hi Leute, Ich habe neulich eine navigation bar in Html css und javascript Programmiert. Jetzt habe ich aber das Problem, dass diese Navigation bar (Fixed on the top) Die ersten paar Zeilen, die ich schreibe überdeckt. Wenn ich in meinem

mit

die ersten paar Zeilen schreibe, werden diese von der Navigation bar überdeckt. Wenn ich aber einfach nur den Tag

schreibe, dann ist die navigation bar nicht mehr ganz oben sondern etwas nach unten verschoben. Das will ich auch nicht (: Was kann ich machen?

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

HTML/CSS/JAVASCRIPT Taschenrechner Fehler beheben?

ich programmiere grade einen Taschenrechner mithilfe von Javascript, habe auch alles soweit richtig hinbekommen. nur wenn ich einen buchstaben eingebe zeigt mit der browser(in diesem fall t): Uncaught ReferenceError: t is not defined

welche funktion muss ich noch hinzufügen das einfach gar nichts bei einem buchstaben passiert aber auch keine fehlermeldung kommt?

danke

https://hastebin.com/nutoquduca.html

...zum Beitrag

Sticky navbar mit Header?

Ich will eine Webseite programmieren (mit CSS, HTML und JavaScript) , bei der ganz oben die Navigation unter dem Header bzw Logo ist. Aber wenn man runterscrollt, soll die navbar oben fest sein. Falls ihr versteht, was ich meine :D

Habe schon die Navbar, den Header, also die ganze Webseite gebaut.

Über Tipps und Hilfe würde ich mich freuen.

...zum Beitrag

Wie kann ich über einen :hover mit Html5 css und javascript einen ton abspielen?

Hallo Leute, ich bastel seit kurzem an einer kleinen Homepage und möchte bei der auslösung eines hovers (sobald der zeiger auf ein bestimmtest element zeigt) ein ton abspielen lassen.. Ich suche bereits seit 2 tagen nach einer lösung, jedoch vergeblich... ich habe sehr gute erklärungen gefunden jedoch kommt bei mir eine fehler meldung sobald ich folgendes eingebe: und zwar wird das source rot unterstrichen... ich weiß jedoch nicht wieso und bei allem lösungen die ich gefunden habe finde ich fast immer die gleiche lösung... ich arbeite mit dem editor NetBeans... die seite besteht der zeit aus Html5 und css... javascript wird auch kommen sobald ich eine lösung für das problem gefunden habe...

vllt findet sich jemand der sich gut auskennt und mir evtl. ein guten beispiel für die lösung zeigen kann ....

danke schon mal :)

...zum Beitrag

Forum nur mit HTML und CSS?

Ist es möglich ein Forum zu erstellen ohne PHP und JavaScript?

Da ich momentan weiterhin nur mit HTML und CSS arbeite, wäre es super, falls es da eine Lösung gibt. Ich will erst mit HTML und CSS sicher sein, bevor ich PHP und JavaScript lerne.

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zum Beitrag

Wie bekomme ich dieses Design hin?

Hey,
ich bin langsam am verzweifeln...
Ich frage mich die ganze Zeit wie ich das in CSS mithilfe von HTML und JS hinbekomme. (siehe Bild) Ich will das wenn man auf "Fach hinzufügen" klickt(grün), eine horizontale Linie entsteht und wenn man auf "Kategorie hinzufügen" klickt, eine vertikale linie. Auf die dabei entstehenden Felder sollte ich auch zugriff haben. Außerdem sollte es auch dynamisch sein. Wie bekomme ich das hin ?

...zum Beitrag

html ausklappbare Navigation?

Hallo Leute,

kann mir jemand sagen wie man nur mithilfe von html und css in der Navigation im Header einen ausklappbare "ul" einbauen kann. Also wenn man über bspl. über Beispiel1. swipet klappt sich eine "ul" aus, die auch links besitzt.(Natürlich sollen die Links untereinander sein)

Vielen Dank vorraus!

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen