Вопросы по js и jquery

seg0ro

1 мар 2012 г., 19:09

Let Mortal Kombat begin

Ага, спасибо.

сeнсор

1 мар 2012 г., 19:12

КЕК

надо бы закрепить тему

L!MP

1 мар 2012 г., 19:17

jQuery конечно хорошая вещь, но 70кб кода.. пусть он и кешируется арбузом, но при первом заходе на сайт, с нашим моб.тырнетом есть большой риск что у юзера так и не хватит нервов ждать

Jane

1 мар 2012 г., 19:20

Блиносвёрт ?

Gnom (01.03.2012/15:52)
seg0ro, Возможно она имела в виду доктайп, так как с доктайпом XHTML MOBILE по идеи JS не будет работать

да, это имела в виду

Gnom

1 мар 2012 г., 19:52

Так вот примеры выпадающего меню на jQuery
CSS

#drop-and-down{
		margin: 0;
		padding: 0;
	}
	#drop-and-down li{
		float: left;
    	        list-style: none;	
	}
	#drop-and-down li a{
		display: block;
		padding: 5px 12px;
		text-decoration: none;
		width: 70px;
		background: #20548E;
		color: #EAFFED;	
	}
	
	#drop-and-down li a:hover{
		background: #1A4473;	
	}
	#drop-and-down li ul{
		margin: 0;
		padding: 0;
		position: absolute;
		display: none;
	}
	#drop-and-down li ul li{
		float: none;
    	display: inline;
	}
	#drop-and-down li ul li a{
		width: auto;
    	background: #9F1B1B;
	}
	#drop-and-down li ul li a:hover{
		background: #7F1616;
	}

JS

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
		$('#drop-and-down li').hover(
		function(){
			$(this).children('ul').slideDown();
		},
		function(){
			$(this).children('ul').slideUp();
		});
	});
    </script>

HTML

<ul id="drop-and-down">
    	<li><a href="#">Меню 1</a>
        	<ul>
            	<li><a href="#">Подменю 1.1</a></li>
            	<li><a href="#">Подменю 1.2</a></li>
            	<li><a href="#">Подменю 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 2</a>
        	<ul>
            	<li><a href="#">Подменю 2.1</a></li>
            	<li><a href="#">Подменю 2.2</a></li>
            	<li><a href="#">Подменю 2.3</a></li>
            	<li><a href="#">Подменю 2.4</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 3</a>
        	<ul>
            	<li><a href="#">Подменю 3.1</a></li>
            	<li><a href="#">Подменю 3.2</a></li>
            	<li><a href="#">Подменю 3.3</a></li>
            	<li><a href="#">Подменю 3.4</a></li>
            	<li><a href="#">Подменю 3.5</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 4</a>
        	<ul>
            	<li><a href="#">Подменю 4.1</a></li>
            	<li><a href="#">Подменю 4.2</a></li>
            	<li><a href="#">Подменю 4.3</a></li>
            	<li><a href="#">Подменю 4.4</a></li>
            	<li><a href="#">Подменю 4.5</a></li>
            	<li><a href="#">Подменю 4.6</a></li>
            </ul>
        </li>
        <li><a href="#">Меню 5</a>
        	<ul>
            	<li><a href="#">Подменю 5.1</a></li>
            	<li><a href="#">Подменю 5.2</a></li>
            	<li><a href="#">Подменю 5.3</a></li>
            	<li><a href="#">Подменю 5.4</a></li>
            	<li><a href="#">Подменю 5.5</a></li>
            	<li><a href="#">Подменю 5.6</a></li>
            	<li><a href="#">Подменю 5.7</a></li>
            </ul>
        </li>
    </ul>

ну и ссылки собственно
Это с DOCTYPE HTML5
Это с мобильным(для проверки открывать на мобильном надо)

Gnom

1 мар 2012 г., 20:15

Забыл ссылку на скачивание ))
demo.iphp.pro/drop-and-down/demo.zip

nan4ik

1 мар 2012 г., 23:39

Gnom, Будь добр,предоставь видео

Gnom

2 мар 2012 г., 12:39

Ну теперь я смогу только в понедельник вечером, я щас очень далеко от своего компьютера (((

No-Tactic

2 мар 2012 г., 13:02

Gnom, ну вообще я просил кое-что другое =)
мне надо было нечто вот такое http://ruseller.com/lessons/le ... m#one
ну в общем я уже сам разобрался при помощи цсс3

Gnom

3 мар 2012 г., 9:46

No-Tactic (02.03.2012/10:02)
Gnom, ну вообще я просил кое-что другое =)
мне надо было нечто вот такое http://ruseller.com/lessons/le ... m#one
ну в общем я уже сам разобрался при помощи цсс3

Ну так это акардион а не мню разъежающееся? для него лучше всего использовать jQueryUI (http://jqueryui.com/) там есть много разных фич