hlmod.hu
https://hlmod.hu/

link in HTML
https://hlmod.hu/viewtopic.php?f=114&t=29338		 Oldal: 1 / 1
Szerző:  *GrafitY* [ 2018.08.27. 09:35 ]
Hozzászólás témája:  link in HTML
Helló!
Szükségem lenne a következőre:
Adott egy szövegrész, és egy egyszerű html gomb. Mikor a gombra kattintok, a szövegrészben egy megadott bekezdésre gördül az ablak. Láttam már ilyet egy oldalon, de nem találom, hogy azzal mutassam be, de egy ilyen icon jelzi:
Kép

EDIT:
Egy ilyenre lenne szükségem, ami ebben is látható: https://github.com/twbs/bootstrap#table-of-contents
Szerző:  Krisznitro [ 2018.08.27. 09:52 ]
Hozzászólás témája:  Re: link in HTML
*GrafitY* írta:
Helló!
Szükségem lenne a következőre:
Adott egy szövegrész, és egy egyszerű html gomb. Mikor a gombra kattintok, a szövegrészben egy megadott bekezdésre gördül az ablak. Láttam már ilyet egy oldalon, de nem találom, hogy azzal mutassam be, de egy ilyen icon jelzi:
Kép

EDIT:
Egy ilyenre lenne szükségem, ami ebben is látható: https://github.com/twbs/bootstrap#table-of-contents

Hi.

Az első sorban az <i class=" az lesz az ikon, ami valószínűleg fontawesome css-ben szerepel. (A nevét sajnos nem tudom, de ha keresgélsz itt, akkor megtalálod)
Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. <a href="#valami"><i class="fa"></i>Szöveghez</a>
  2.  
  3. <div>
  4.   <p>
  5.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum accumsan felis. Ut semper turpis eget vehicula sagittis. Nam aliquet tincidunt nibh sit amet suscipit. Cras mollis nulla non enim scelerisque vulputate. Suspendisse hendrerit metus ac massa tincidunt, in elementum est vestibulum. Nunc egestas sed ligula et ultrices. Proin ante elit, pretium nec tincidunt eget, facilisis et felis.
  6.     <span id="valami"></span>
  7.      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum accumsan felis. Ut semper turpis eget vehicula sagittis. Nam aliquet tincidunt nibh sit amet suscipit. Cras mollis nulla non enim scelerisque vulputate. Suspendisse hendrerit metus ac massa tincidunt, in elementum est vestibulum. Nunc egestas sed ligula et ultrices. Proin ante elit, pretium nec tincidunt eget, facilisis et felis.
  8.   </p>
  9. </div>
GeSHi © Codebox Plus
Szerző:  *GrafitY* [ 2018.08.27. 10:05 ]
Hozzászólás témája:  Re: link in HTML
Igen, valami ilyesmi, csak picit csinosabbra gondoltam hogy az ikon is meg jelenik, mint ami itt látható:
https://github.com/twbs/bootstrap#table-of-contents
Szerző:  Krisznitro [ 2018.08.27. 10:07 ]
Hozzászólás témája:  Re: link in HTML
*GrafitY* írta:
Igen, valami ilyesmi, csak picit csinosabbra gondoltam hogy az ikon is meg jelenik, mint ami itt látható:
https://github.com/twbs/bootstrap#table-of-contents

Első hozzászólásomat szerkesztettem :)

EDIT5:
jQuery-vel oldottam meg. Amikor a h1-re húzod a kurzort, akkor megjelenik az a kis ikon, amely a divre hivatkozik.
Ikon méretet CSS-ben tudod módosítani.
Kód: [Egész kijelölése] [Mutatás/Eltüntetés]
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>Page Title</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <style>
  9.         .icon {
  10.             height:12px;
  11.             width: 12px;
  12.             opacity: 0;
  13.         }
  14.         .hover {
  15.             opacity: 1;
  16.         }
  17.        
  18.     </style>
  19.    
  20.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  21. </head>
  22. <body>
  23.     <div class="container-fluid">
  24.         <div class="break" style="height:10vh;"></div>
  25.     <div id="elso">
  26.         <h1><a href="#elso"><img src="icon.png" class="icon" /></a> Első</h1>
  27.         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime eius eum architecto dolorem ipsam rem, vero, cupiditate ipsum praesentium totam sint exercitationem hic libero expedita temporibus est nisi quasi odit.</p>
  28.     </div>
  29.     <div class="break" style="height:50vh;"></div>
  30.     <div id="masodik">
  31.         <h1><a href="#masodik"><img src="icon.png" class="icon" /></a> Második</h1>
  32.         <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime eius eum architecto dolorem ipsam rem, vero, cupiditate ipsum praesentium totam sint exercitationem hic libero expedita temporibus est nisi quasi odit.</p>
  33.     </div>
  34.     <div class="break" style="height:100vh;"></div>
  35. </div>
  36. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  37. <script>
  38.     $('h1').hover(
  39.         function() {
  40.             $('.icon').addClass( "hover" );
  41.         },
  42.         function() {
  43.             $('.icon').removeClass( "hover" );
  44.         }
  45.     );
  46. </script>
  47. </html>
GeSHi © Codebox Plus
Oldal: 1 / 1 Minden időpont UTC+02:00 időzóna szerinti
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/