CSS Slider

by Roman

HTML

<body>



        <!-- флажок 1 -->

        <input id="shadow-func1" name="function1" type="checkbox" />
        <label class="checkbox Function1" for="shadow-func1" title="Также вносит изменения в строку состояния и текст уведомления под кнопками слайдов">
            отключить показ слайдов по наведению курсора
        </label>
        <br /><br />



        <!-- кнопки выбора слайдов -->

        <input id="shadow-slide1" name="shadow-slide" type="radio" />
        <label class="button SlideKey1" for="shadow-slide1">
            слайд 1
        </label>

        <input id="shadow-slide2" name="shadow-slide" type="radio" />
        <label class="button SlideKey2" for="shadow-slide2">
            слайд 2
        </label>

        <input id="shadow-slide3" name="shadow-slide" type="radio" />
        <label class="button SlideKey3" for="shadow-slide3">
            слайд 3
        </label>

        <input id="shadow-slide4" name="shadow-slide" type="radio" />
        <label class="button SlideKey4" for="shadow-slide4">
            слайд 4
        </label>



        <!-- уведомление по событию "Выбран / не выбран слайд" -->

        <div class="cases visible NonSelected">
            <b> Кликните </b>

            <!-- уведомление по событию "Показ по клику" -->

            <u class="cases visible inline NonAutoDisplay" title="эта часть будет исчезать / появляться при переключении флажка">или наведите курсор</u>

            на кнопку нужного слайда,

            <br />
            причём это уведомление исчезнет, как только
            нажмёте кнопку,

            <br />
            а ниже появится ссылка, чтобы обновить страницу
            заново.
        </div>



        <!-- тумблер левой панели -->

        <input id="shadow-left1" name="shadow-left1" type="checkbox" />
        <label class="switch LeftKey1" for="shadow-left1" title="Развернуть / свернуть панель"></label>



        <!-- левая выпадающая панель -->

        <div id="left"...

CSS

/* ==================== ОТВЛЕЧЁННОЕ: сброс стилей ==================== */



        * {
            border: 0 solid;                       /* украшательство */
            margin: 0;                             /* украшательство */
            padding: 0;                            /* украшательство */
            outline: 0;                            /* украшательство */
            -moz-box-sizing: border-box;           /* украшательство */
            -webkit-box-sizing: border-box;        /* украшательство */
            box-sizing: border-box;                /* украшательство */
        }



        body {
            background: #eee;                      /* украшательство */
            font-family: Verdana, Tahoma, Arial;   /* украшательство */
            font-size: 10pt;                       /* украшательство */
            padding: 15px;                         /* украшательство */
            text-align: center;                    /* украшательство */
            overflow: scroll;                      /* украшательство */
        }



        a {
            color: #c00;                           /* украшательство */
            font-weight: bold;                     /* украшательство */
            text-decoration: underline;            /* украшательство */
        }

        a:hover {
            text-decoration: none;                 /* украшательство */
        }



        /* ==================== КОНТЕНТ: левая выпадающая панель ==================== */



        #left {
            position: absolute;                    /* панель будем позиционировать                      */
            right: 50%;                            /* двигаем на центр и оталкивается справа налево     */
            margin-right: 240px;                   /* отодвигаем влево за слайдер (половина его ширины) */
            overflow: hidden;                      /* выступающие части контента отсекаем               */

            background: #ddd;                     ...