nicht angemeldet
PNG Datei als Icon?
Gunnar Bittersmann
Matthias ApselGrüßt euch!
Ich bin neu im Forum und ebenso neu in Sachen Html und CSS. Ich habe ein Pop-up Menu mit diesem guide: https://www.youtube.com/watch?v=RLCKShRRwG0 erstellt und es funktioniert auch alles.
Nun würde ich gerne einige dieser Icons ersetzen. Ich habe bereits ein eigenes Icon als Png und svg-datei erstellt. Nur habe ich keine Ahnung wie ich diese Google Icons mit meinen eigenen Icons ersetzen soll. Ist dies überhaupt möglich? Geht dadurch der hover effekt verloren?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-utf-8">
<title>Pop Out Menu</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="menu2.css">
<link href="Main.css" rel="stylesheet"/>
</head>
<body>
<div id="header">
<div class="header">
<img class="header-img" src="banner3.png" height="152"; width="100%"; />
</div>
</div>
<div class="container"onclick="expand()">
<div class="toggle" id="toggle">
<i class="material-icons" id="add">
add
</i>
</div>
</div>
<div class="menu" id="menu">
<div class="item">
<a href="menu2.html">
<i class="material-icons">home</i>
</a>
</div>
<div class="item">
<a href="#">
<i class="material-icons">notifications</i>
</a>
</div>
<div class="item">
<a href="#">
<i class="material-icons">mail</i>
</a>
</div>
<div class="item">
<a href="#">
<i class="material-icons">add_a_photo</i>
</a>
</div>
<div class="item">
<a href="#">
<i class="material-icons">videocam</i>
</a>
</div>
<div class="item">
<a href="#">
<i class="material-icons">search</i>
</a>
</div>
</div>
<script type="text/javascript">
var j=0;
var i=document.getElementById("menu").childNodes;
function expand(){
if(j==0){
document.getElementById("add").style.transform = 'rotate(45deg)';
document.getElementById("menu").style.transform = 'scale(1)';
i[1].style.transform='translateY(-160px)';
i[3].style.transform='translate(140px,-80px)';
i[5].style.transform='translate(140px,80px)';
i[7].style.transform='translateY(160px)';
i[9].style.transform='translate(-140px,80px)';
i[11].style.transform='translate(-140px,-80px)';
j=1;
}
else{
document.getElementById("add").style.transform = 'rotate(0deg)';
document.getElementById("menu").style.transform = 'scale(0.9)';
i[1].style.transform='translateY(0)';
i[3].style.transform='translate(0)';
i[5].style.transform='translate(0)';
i[7].style.transform='translateY(0)';
i[9].style.transform='translate(0)';
i[11].style.transform='translate(0)';
j=0;
}
}
</script>
</body>
</html>
`
CSS:
body{
background-color: #2a3a49;
background: url(darkhoneycomb.png) no-repeat center center fixed;
background-size: cover;
margin: 0;
position: absolute;
left: 650px;
bottom: 0px;
padding: inherit;
}
#left {
position: absolute;
top: 60%;
}
#right {
position: absolute;
top: 20%;
right: 0;
z-index: 1;
}
nav {
padding: 50px;
}
nav ul {
list-style-type: none;
float: right;
}
nav ul li {
float: left;
}
nav ul li a {
color: #000000;
padding: 0 30px;
}
*{
margin: 0;
padding:0;
list-style: none;
text-decoration: none;
}
.header{
width: 100%;
height: 90px;
display: block;
background-color: #000000;
position: fixed;
top: 42px;
left:0px;
margin:0 auto;
}
.header-img{
width: auto;
position: fixed;
margin-top: auto;
margin: 0 auto;
height: 170px;
top: 5px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
}
.logo_container{
height: 100%;
display: table;
float: left;
color:white;
}
#logo {
font-size: 2em;
}
.container {
text-align: center;
width: 60%;
margin: 110px auto;
position: fixed;
left: auto;
}
h1 {
font-size: 1.3em;
line-height: 1.4em;
}
#banner {
background-color: none;
position: fixed;
top:0;
margin: auto;
top: 0;
bottom: 509px;
left: 0px;
right: 0;
width: auto
}
.container,.menu{
height: 40px;
width: 160px;
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0px;
right: 0;
cursor: pointer;
}
.menu{
z-index: -1;
transform: scale(0.9);
}
toggle{
height: 0;
width: 80px;
position: absolute;
top:0;
}
.toggle{
height: 0;
width: 80px;
border-bottom: 70px solid #FBD244;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top:0;
}
.toggle:before{
content: '';
height: 0;
width: 80px;
border-top: 70px solid #f9d230;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top:70px;
Left: -40px;
}
.item{
height: 0;
width: 80px;
border-bottom: 70px solid #000000;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top:0;
transition: 1s;
}
.item:before{
content: '';
height: 0;
width: 80px;
border-top: 70px solid #000000;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
position: absolute;
top:70px;
Left: -40px;
}
#add{
font-size: 100px;
color: white;
position: relative;
top: 20px;
right: 10px;
transition: 1s;
}
a>.material-icons{
color:#d2d2d2;
font-size: 60px;
}
a{
position: relative;
top:40px;
left: 10px;
}
a>.material-icons:hover{
color:#f9d230;
transform: scale(1.3);
}
a.{
position: relative;
top: 40px;
left: 10px;
}
}
LG TheMentholist
-
In dem Beispiel wird die Grafik in einer Schrift versteckt. In meinen Augen eine Unsitte, aber sei's drum.
In den CSS-Vorgaben findest du unter .item:before die scheinbar leere Eigenschaft content. Stünde die Schriftart hier zur Verfügung, würde dort die Grafik erscheinen.
In content kannst du statt Text (bzw. vermeintlichem Text, wie im Beispiel) auch die URL zu einer Grafik angeben,
content: url("http://www.example.com/test.svg"), und noch einiges andere, siehe https://developer.mozilla.org/en-US/docs/Web/CSS/content. -
Liebe(r) thementholist,
Ich habe ein Pop-up Menu mit diesem guide: https://www.youtube.com/watch?v=RLCKShRRwG0 erstellt
keine gute Idee. Warum nicht? Nun, Du hast in Deinem HTML jede Menge DIV-Suppe. Das geht besser.
<div id="header">...</div>möchte bitte ein<header>...</header>sein. Dein CSS-Selektor lautet dann eben nicht mehr#header {}, sondernheader {}.Die Verschachtelung von zwei DIVs ist auch nicht sinnvoll:
<div id=header> <div class="header"> <img ...> </div> </div>Hier genügt einfach das hier:
<header> <img ...> </header>Dazu wäre noch anzumerken, dass das Bild wohl eher kein Inhalt, sondern wohl schmückender Hintergrund ist, so dass man das Bild ins CSS auslagern sollte:
<header>Textinhalt des Banners</header>Mit CSS-Mitteln kann man dann den lesbaren Header-Text nach Belieben unsichtbar machen und dafür das Banner als Hintegrundgrafik einsetzen.
und es funktioniert auch alles.
Das lass mal blinde User beurteilen!
<div class="container"onclick="expand()">Bitte keine JavaScript-Attribute im HTML-Code! Überhaupt sollte das gesamte HTML, welches nur mit JavaScript einen Sinn hat, nicht im Dokument stehen, sondern von JavaScript dort generiert werden!
Besser wäre das hier:
<nav> <h2>Navigation</h2> <ul> <li><a href="/home">Home</a></li> <li><a href="/contact">Kontakt</a></li> <li><a href="/links">Links</a></li> </ul> </nav>Das ist die Basis. Die kann nun von JavaScript in der Art aufgehübscht werden, wie Du das gerne hättest. Aber ohne JavaScript (es gibt JS-Blocker und User, die das JS aus Sicherheitsgründen nicht verfügbar haben) ist die Seite garantiert benutzbar!
Nun würde ich gerne einige dieser Icons ersetzen. Ich habe bereits ein eigenes Icon als Png und svg-datei erstellt.
SVG ist prima! Dazu muss man halt den CSS-Code anpassen. Deine Icons werden durch eine Schriftartendatei definiert und durch in CSS verwendete Sonderzeichen erzeugt. Da kann anstelle von
content: "(Sonderzeichen)";auchcontent: url(/path/icon.svg);stehen. Oder Du definierst anstelle voncontentebenbackground-image... es gibt sicherlich mehrere Möglichkeiten.Geht dadurch der hover effekt verloren?
Der Hover-Effekt wird entweder über CSS gesteuert (da gibt es die Pseudoklasse
:hover), oder über JavaScript. Verlinke doch ein Online-Beispiel, gerne auf so seiten wie jsFiddle oder CodePen, dann kann man das in Gänze sehen und überblicken! Ich biete Dir sogar an, aus Deinem Projekt ein Tutorial für unser Wiki hier auszuarbeiten. Dann kannst Du mit allem notwendigen Hintergrundwissen Dein Beispiel nicht nur technisch verbessern, sondern nach Belieben an Deine Bedürfnisse anpassen.Liebe Grüße,
Felix Riesterer.
-
Tach!
Überhaupt sollte das gesamte HTML, welches nur mit JavaScript einen Sinn hat, nicht im Dokument stehen, sondern von JavaScript dort generiert werden!
Das wird unnötig aufwendig, je mehr HTML zu erstellen ist.
<template>existiert und hat den Vorteil, dass es normales HTML ist, das man auch im Editor wie üblich und mit allen unterstützenden Mitteln erstellen kann.dedlfix.
-
Lieber dedlfix,
Das wird unnötig aufwendig, je mehr HTML zu erstellen ist.
wenn Du das JavaScript als externe Bibliothek einsetzen möchtest, die das DOM nach einer passenden Navigation hin untersucht, um dann daraus eine solche Popup-Navi zu basteln (wie das die Lightbox tut), halte ich das keinesfalls für unnötig aufwendig!
Liebe Grüße,
Felix Riesterer.
-
Tach!
Das wird unnötig aufwendig, je mehr HTML zu erstellen ist.
wenn Du das JavaScript als externe Bibliothek einsetzen möchtest, die das DOM nach einer passenden Navigation hin untersucht, um dann daraus eine solche Popup-Navi zu basteln (wie das die Lightbox tut), halte ich das keinesfalls für unnötig aufwendig!
Dass es Anwendungsfälle gibt, bei denen man kein Template verwenden kann, sehe ich auch so. Aufwendig bleibt es trotzdem, jedes Element einzeln zu erstellen und ins DOM zu hängen. Na gut, man könnte das HTML als String erstellen und ins .innerHTML eines Elements schreiben oder mit .insertAdjacentHTML(). Bleibt immer noch, dass die meisten Editoren Strings als "eine Menge Zeichen" statt als Code betrachten.
dedlfix.
-
Lieber dedlfix,
Dass es Anwendungsfälle gibt, bei denen man kein Template verwenden kann, sehe ich auch so.
ich habe ein wesentlich simpleres Markup verwendet:
<nav> <ul> <li><a href="#">Text</a></li> ... </ul> </nav>Das
<nav>wird übrigens im Dokument gesucht, um dann daraus so ein Menü zu machen. [Beispielseite]Liebe Grüße,
Felix Riesterer.
-
-
-
-
-
@@thementholist
Ich bin neu im Forum und ebenso neu in Sachen Html und CSS. Ich habe ein Pop-up Menu … erstellt und es funktioniert auch alles.
Auch mit Tastatursteuerung? Das glaube ich erst, wenn ich’s sehe.
Ich habe bereits ein eigenes Icon als Png und svg-datei erstellt. Nur habe ich keine Ahnung wie ich diese Google Icons mit meinen eigenen Icons ersetzen soll. Ist dies überhaupt möglich? Geht dadurch der hover effekt verloren?
Wie’s geht, habe ich im ersten und zweiten Teil meines Tutorials beschrieben.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Lieber Gunnar,
Auch mit Tastatursteuerung? Das glaube ich erst, wenn ich’s sehe.
vielleicht so? [Beispiel mit Tastaturnavigation]
Wie’s geht, habe ich im ersten und zweiten Teil meines Tutorials beschrieben.
Na, dann ab ins Wiki damit!
Liebe Grüße,
Felix Riesterer.
-
@@Felix Riesterer
Wie’s geht, habe ich im ersten und zweiten Teil meines Tutorials beschrieben.
Na, dann ab ins Wiki damit!
Nö, ins Blog.
Und da war er wieder, der Knoten im Taschentuch.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar Bittersmann,
Und da war er wieder, der Knoten im Taschentuch.
Siehst du denn überhaupt noch Taschentuch vor lauter Knoten?
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯
-
-
-