1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

 [lang:php]
<?php
ob_start();
header("Content-Type: text/html; charset=UTF-8");
session_start();
?>
 
<style>
    #wm     { width: 800px; position: absolute; }
    #wm div { float: left; width: 150px; height: 20px; overflow: hidden; text-align: left;
              border: 1px solid  gray; border-radius: 8px; -moz-border-radius: 8px;  -webkit-border-radius: 8px; 
              background: #F8F8F8; transition: height 2s; position: sticky; position: -webkit-sticky; z-index: 200; }
    #wm div:hover   { height: 300px; text-align: left; background: #ffffb7; transition: height 2s; 
                   position: sticky; position: -webkit-sticky; z-index: 200; /* overflow: auto; */ }
                            
    #wm a       { font: 11px arial; color: black; display: block; line-height: 120%;  text-decoration: none; 
                                  padding-left: 3px; }
    #wm a:hover { text-transform: uppercase; font-weight: bold; }
    ::-webkit-scrollbar         { width: 5px; }
    ::-webkit-scrollbar-track   { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }
    ::-webkit-scrollbar-thumb   { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }
</style>
 
<?php
 
 echo "<br> <h4> egyszerű vizszintes menű: </h4> <br>
<DIV id='wm'>
    
    <div>
        <CENTER> <b> Oszlopnév 1 </b> <br><br> </CENTER>
            <a href='' title='' >   ■ Menüpont 1/1   </a>
            <a href='' title='' >   ■ Menüpont 1/2   </a>
            <a href='' title='' >   ■ Menüpont 1/3   </a>
            <a href='' title='' >   ■ Menüpont 1/4   </a>
            <a href='' title='' >   ■ Menüpont 1/5   </a><br>
    </div>          
    <div>
        <CENTER> <b> Oszlopnév 2 </b> <br><br> </CENTER>
            <a href='' title='' >   ■ Menüpont 2/1   </a>
            <a href='' title='' >   ■ Menüpont 2/2   </a>
            <a href='' title='' >   ■ Menüpont 2/3   </a>
            <a href='' title='' >   ■ Menüpont 2/4   </a>
            <a href='' title='' >   ■ Menüpont 2/5   </a><br>
    </div>  
    <div>
        <CENTER> <b> Oszlopnév 3 </b> <br><br> </CENTER>
            <a href='' title='' >   ■ Menüpont 3/1   </a>
            <a href='' title='' >   ■ Menüpont 3/2   </a>
            <a href='' title='' >   ■ Menüpont 3/3   </a>
            <a href='' title='' >   ■ Menüpont 3/4   </a>
            <a href='' title='' >   ■ Menüpont 3/5   </a><br>
    </div>      
    <div>
        <CENTER> <b> Oszlopnév 4 </b> <br><br> </CENTER>
            <a href='' title='' >   ■ Menüpont 4/1   </a>
            <a href='' title='' >   ■ Menüpont 4/2   </a>
            <a href='' title='' >   ■ Menüpont 4/3   </a>
            <a href='' title='' >   ■ Menüpont 4/4   </a>
            <a href='' title='' >   ■ Menüpont 4/5   </a><br>
    </div>
    <div>
        <CENTER> <b> Oszlopnév 5 </b> <br><br> </CENTER>
            <a href='' title='' >   ■ Menüpont 5/1   </a>
            <a href='' title='' >   ■ Menüpont 5/2   </a>
            <a href='' title='' >   ■ Menüpont 5/3   </a>
            <a href='' title='' >   ■ Menüpont 5/4   </a>
            <a href='' title='' >   ■ Menüpont 5/5   </a><br>
    </div>
</DIV>";
 
ob_end_flush(); ?>