API tools faq
paste
Vprento

Interaktivni Aplikacii

Vprento
Nov 18th, 2018
90
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.82 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <title>Kolokvium 1</title>
  4.         <style>
  5.             body, html {
  6.                 margin:0;
  7.                 padding:0;
  8.             }
  9.             nav {
  10.                 display: block;
  11.                 text-align: center;
  12.                 padding:15px 0px;
  13.  
  14.             }
  15.             nav ul {
  16.                 display: block;
  17.                 margin:0;
  18.                 padding:0;
  19.                 list-style:none;
  20.                 text-align:center;
  21.             }
  22.             nav ul li {
  23.                 display:inline-block;
  24.                 background: #f9f9f9;
  25.             }
  26.             nav ul li a {
  27.                 display: block;
  28.                 font-size:18px;
  29.                 color: #000;
  30.                 text-decoration: none;
  31.                 font-font:sans-serif;
  32.                 padding:5px 15px;
  33.             }
  34.             nav ul li a:hover,
  35.             nav ul li a:focus {
  36.                 color:#0000FF;
  37.                 text-decoration: underline;
  38.             }
  39.             .collapsable-panels {
  40.                 display:block;
  41.                 width:200px;
  42.                 margin:40px;
  43.             }
  44.             .collapse {
  45.                 display: block;
  46.                 margin-bottom:5px;
  47.                 border:1px solid #eee;
  48.             }
  49.             .collapse .title {
  50.                 display: block;
  51.                 font-size:14px;
  52.                 font-weight:bold;
  53.                 padding:5px;
  54.                 font-family: sans-serif;
  55.                 cursor: pointer;
  56.             }
  57.             .collapse .title:hover {
  58.                 background: #f9f9f9;
  59.             }
  60.             .collapse .data {
  61.                 display: none;
  62.                 padding:5px;
  63.                 background: #f1f1f1;
  64.             }
  65.             .collapse .data b {
  66.                 display:block;
  67.                 font-weight: normal;
  68.                 font-size:14px;
  69.                 margin-top:10px;
  70.             }
  71.             .collapse .data ul {
  72.                 margin:0;
  73.                 padding:0;
  74.                 list-style: none;
  75.             }
  76.         </style>
  77.         <script src="jquery/jquery.js" type="application/javascript"></script>
  78.     </head>
  79.     <body>
  80.  
  81.         <nav>
  82.             <ul>
  83.                 <li><a href="compactdigitalcameras.html">Compact Digital Cameras</a></li>
  84.                 <li><a href="dslrcameras.html">DSLR Cameras</a></li>
  85.                 <li><a href="speedliteflashes.html">Speedlite Flashes</a></li>
  86.             </ul>
  87.         </nav>
  88.  
  89.         <div class="collapsable-panels">
  90.             <div class="collapse">
  91.                 <div class="title">Services & Apps</div>
  92.                <div class="data">
  93.                    <div class="collapse">
  94.                        <div class="title">Services</div>
  95.                        <div class="data">
  96.                            <ul>
  97.                                <li><a href="#">irista</a></li>
  98.                                <li><a href="#">Lifecake</a></li>
  99.                                <li><a href="#">Photo Books</a></li>
  100.                            </ul>
  101.                        </div>
  102.                    </div>
  103.                    <div class="collapse">
  104.                        <div class="title">Apps</div>
  105.                        <div class="data">
  106.                            <ul>
  107.                                <li><a href="#">Camera Connect</a></li>
  108.                                <li><a href="#">EOS Remote</a></li>
  109.                            </ul>
  110.                        </div>
  111.                    </div>
  112.                </div>
  113.            </div>
  114.            <div class="collapse">
  115.                <div class="title">Get Inspired</div>
  116.                <div class="data">
  117.                    <ul>
  118.                        <li><a href="#">Stories</a></li>
  119.                        <li><a href="#">Techniques</a></li>
  120.                        <li><a href="#">Canon Connectivity</a></li>
  121.                        <li><a href="#">Showcase</a></li>
  122.                        <li><a href="#">Gallery</a></li>
  123.                    </ul>
  124.                </div>
  125.            </div>
  126.            <div class="collapse">
  127.                <div class="title">Support</div>
  128.                <div class="data">
  129.                    <ul>
  130.                        <li><a href="#">Drivers</a></li>
  131.                        <li><a href="#">Software</a></li>
  132.                        <li><a href="#">Manuals</a></li>
  133.                        <li><a href="#">FAQs</a></li>
  134.                    </ul>
  135.                </div>
  136.            </div>
  137.        </div>
  138.  
  139.        <script>
  140.            $(document).ready(function() {
  141.                $(".collapse .title").click(function(e) {
  142.                    $(this).siblings(".data").slideToggle(200);
  143.                 })
  144.             })
  145.         </script>
  146.     </body>
  147. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!