Это меню при нажатии открывается, и также при нажатии закрывается. (типа спойлера)
Это в html верх:
<style> div .splLink {width: 130px; height: 40px; border: 2px solid #FFD700; background: #FFFFCC; text-align: center; font-family: Comic Sans Ms; font-size: 15px; padding: 5px;} .spll {width: 130px; height: 70px; } .spll div .splCont {height: auto; width: 300px; background: url(https://forumupload.ru/uploads/0003/83/96/1556-1.png); padding: 5px; z-index: 1000; margin-top: 5px; border: 2px solid #FFD700; font-size: 12px; font-family: Microsoft Sans Serif; text-align: center;} </style>
Как настроить?
width: 130px; - ширина основных блоков, в пикселах.
height: 40px; - высота основных блоков, в пикселах.
border: 2px solid #FFD700; - толщина, метод начертаний и цвет границ основных блоков.
background: #FFFFCC; - цвет фона основных блоков.
text-align: center; - выравнивание текста в основных блоках (можно поставить влево- left и право- right).
font-family: Comic Sans Ms; - шрифт в основных блоках меню.
font-size: 15px; - размер текста в основных блоках меню.
padding: 5px; - отступ от краёв основных блокв (поля).
Это в html низ:
<!--Спойлер - контейнер--> <script type="text/javascript" src="http://szenprogs.ru/scripts/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $(this).parent().children('div.splCont').toggle('normal'); return false; }); }); </script>
А это ставим туда, где вы хотите видеть меню. (чаще всего в объявление)
<center><table style="width: 90%"> <tr> <td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Первый контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td> <td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Второй контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td> <td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Третий контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td> <td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Четвёртый контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td> <td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Пятый контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td> <td><div class="spll"> <DIV jQuery1259073801391="4"><div class=splLink href="javscript://" jQuery1259073801391="2">Шестой контейнер</div> <DIV style="DISPLAY: none; position: absolute;" class=splCont jQuery1259073801391="5"> Тут будет что-то</DIV></DIV> </div></td> </tr> </table></center>
А это меню появляется при наведении на него, и исчезает при отведении мышки с выплывающего текста или заголовка.
<style type="text/css">#menu-css{margin: 0 0 0 50px; padding: 0; list-style: none; }#menu-css li{
position: relative; float: left;margin: 3px;}</style><style type="text/css">li ul { position: absolute;
display: none; border: 1px solid black;background: #000000}</style><style type="text/css">
li:hover ul{display: block;}</style><style type="text/css">#menu-css{margin: 0; padding: 0; list-style: none;}#menu-css li{ position: relative; float: left;margin: 3px;}</style><style type="text/css">
li ul {position: absolute; display: none; border: 1px solid black;background: #DADADA}
</style><style type="text/css">li:hover ul{display: block;}</style>
Отступ от края
Цвет
Толщина рамки