|
Результаты поиска
| | |
| bandjuk | Дата: Четверг, 08.12.2011, 13:11 | Сообщение # 272 | Тема: Скрипт "Смены фона сайта" |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Скрипт позволяет пользователям выбирать свой фон Вашего сайта!
Каждый желающий может выбрать из списка имеющихся или указав адрес картинки поставить свой фон на Ваш сайт!
Скрипт работает на куках!
Установка скрипта:
1. Создаём новый глобальный блок
В вверху сайта в панели администратора выбираем:
Конструктор ---> Включить конструктор ---> Добавить блок+ ---> в настройках нового блока выбираем HTML и вставляем этот код туда:
Code <center>[<small><a href="javascript://" onclick="deletebg()">Удалить свой фон</a></small>]<BR>[<small>Растянуть фон? <input id="str" type="checkbox"></input></small>]</center> <input id='bg' placeholder='Ваша прямая ссылка на фон' size='22' onclick='select()'></input><center><button value='Сменить фон' onclick='bgchange()'>Сменить фон</button></center> Или используйте уже имеющееся:<br> <select id="bgs"> <option selected disabled>Варианты фона</option> <option disabled>Вернуть свою ссылку</option> <option value="http://fotki.ucoz.ua/_ph/16/2/422749439.jpg">Природа</option> <option value="http://fotki.ucoz.ua/_ph/16/2/657599157.jpg">Природа1</option> <option value="http://fotki.ucoz.ua/_ph/16/2/332981696.jpg">Природа2</option> <option value="Адрес фона1">Фон1</option> <option value="Адрес фона 2">Фон2</option> </select> <script type="text/javascript"> var dmn="ваш домен"; $(document).ready(function() { $('#bgs').change(function(){ $('#bg').val($("select#bgs").val()); }); $('#str').change(function(){ if($("#str").is(':checked')){ $('body').removeClass('bg').addClass('bg_temp'); setCookie("stretched", "yes", { expires: 999999999, path:"/", domain:dmn} ); }else if($("#str").is(':not(:checked)')){ $('body').removeClass('bg_temp').addClass('bg'); setCookie("stretched", "no", { expires: 999999999, path:"/", domain:dmn} ); } }); var backgr=getCookie("background") if(backgr){$('#bg').val(backgr); $('#bgs :nth-child(2)').attr("value",backgr); $('#bgs :nth-child(2)').removeAttr("disabled");} }); function deletebg(){ if(!getCookie("background")){alert("У вас нет установленного фона, удалять нечего")}else{ setCookie("background", null, { expires: -1, path:"/", domain:dmn} ) alert("Фон выставлен по умолчанию"); location.reload(true)} } function bgchange(){ if(bg.value!=''){var bg_link=bg.value if(!bg_link.match(/http[^\s\"]+[^\" >]*?/ig)){alert("Вы ввели неверную ссылку на фон")} else{ setCookie("background", bg_link, { expires: 999999999, path:"/", domain:dmn} ) alert("Новый фон установлен, главная страница будет перезагружена") location.reload(true) } }else{alert("Вы не ввели ссылку на фон")} } </script>
<option value="Адрес фона1">Фон1</option> и <option value="Адрес фона 2">Фон2</option> меняем на адреса и названия своих фонов, можно добавлять свои фоны
<option value="Адрес фона1">Фон1</option> и т.д.
далее находим строчку строчку var dmn="ваш домен";
тут надо вставить ваш домен, например var dmn="ssilki.at.ua";
2. Открываем:
Панель управления ---> Управление дизйном (шаблоны) ---> Верхняя часть сайта,
в самый вверх вставляем код:
Code
<script type="text/javascript">
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
))
return matches ? decodeURIComponent(matches[1]) : undefined
}
function setCookie(name, value, props) {
props = props || {}
var exp = props.expires
if (typeof exp == "number" && exp) {
var d = new Date()
d.setTime(d.getTime() + exp*1000)
exp = props.expires = d
}
if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }
value = encodeURIComponent(value)
var updatedCookie = name + "=" + value
for(var propName in props){
updatedCookie += "; " + propName
var propValue = props[propName]
if(propValue !== true){ updatedCookie += "=" + propValue }
}
document.cookie = updatedCookie
}
var bg_li=getCookie("background")
if(bg_li){document.body.style.backgroundImage = 'url('+bg_li+')';}else{document.body.style.backgroundImage = 'url(Адрес исходного фона)'}
document.body.style.padding = '0';
document.body.style.margin = '0';
$('document').ready(function(){
if(getCookie("stretched")=="yes"){$('#str').attr('checked','true');$('body').removeClass('bg').addClass('bg_temp');} else if(getCookie("stretched")=="no" || !getCookie("stretched")){$('#str').removeAttr('checked');$('body').removeClass('bg_temp').addClass('bg');}
});
</script>
в нём находим строчку:
Code if(bg_li){document.body.style.backgroundImage = 'url('+bg_li+')';}else{document.body.style.backgroundImage = 'url(Адрес исходного фона)'}
и заменяем Адрес исходного фона на адрес фона, который будет появляться при загрузке страницы (исходного фона).
Например:
{document.body.style.backgroundImage = 'url(http://fotki.ucoz.ua/_ph/16/2/422749439.jpg)'}
3. Открываем:
Панель управления ---> Таблица стилей CSS, в самый низ вставляем код:
Code .bg_temp{
background-Position: center;
background-Attachment: fixed;
background-Repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
}
.bg{
background-Position: center;
background-Attachment: fixed;
background-Repeat: no-repeat;
}
Установка завершена!
Материалы на эту же тему:
Скрипт "Кнопка "Скачать" с показом размера файла"
Скрипт "Вокруг курсора вращается красивый мигающий круг"
Скрипт "Красивая кнопка для печати страницы"
Скрипт "Два блока в одном"
Скрипт "Описание групп в статистике форума"
Скрипт "Новый вид бокового ползунка (полосы прокрутки)"
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
|
| |
| |
| bandjuk | Дата: Суббота, 10.12.2011, 17:49 | Сообщение # 273 | Тема: Скрипт "Кнопка Google+ для новостей сайта Ucoz" |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Если вдруг кто-то не знает в поисковой системе Гугл появилась функция Google+
"Google+" - социальная сеть. Пользователи могут создавать круги общения, размещать записи и фотографии и делиться ими с друзьями, родственниками, коллегами и т.д., общаться в групповом чате и проводить видеовстречи, играть.
Благодаря этой функии Вы можете разместить на страницах своего сайта кнопку с голосованием за Ваш материал. Но самое главное Вы сможете делится этим материалом с другими!
Скажу по секрету благодаря этой кнопочке Ваш сайт существенно поднимит свой авторитет в поиске Гугла!
Установка:
Панель Управления ---> Управление дизайном ---> Новости сайта ---> Страница материала и комментариев к нему
Находим:
Code <!--<s5183>-->Всего комментариев<!--</s>-->
Перед этой записью ставим код:
Code <g:plusone></g:plusone>
Код самого скрипта ставим между <head> и </head> этой же страницы:
Code <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>
Для голосования Вам нужно зарегистрироваться в Гугле!
Для изменения внешнего вида кнопки перейдите сюда:
Рекомендую Вам поставить это кнопку в каталоге статей, материалов и в новостях сайта!
Материалы на эту же тему:
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Классные медали на форум"
Скрипт "Кнопка добавить материал, новость"
Скрипт "Фоновое изображение на форуме"
Скрипт "Кнопка "Важно" и "PS" при добавлении темы/поста"
|
| |
| |
| bandjuk | Дата: Суббота, 10.12.2011, 22:27 | Сообщение # 274 | Тема: Как вставить текст перед новостями сайта на главной |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Начинающие вебмастера часто задаются вопросом: "Как вставить текст перед новостями сайта на главной странице сайта". В этой статье я научу Вас этому!
Идём в самый низ главной страницы сайта, находим кнопку "Редактировать HTML код"
находм код:
Code <div style="text-align:right;padding-bottom:3px;">[ <a href="$ADD_ENTRY_LINK$">Добавить новость</a> ]</div><?if($ADD_ENTRY_LINK$)?> <?endif?>$LAST_NEWS$
Его нам нужно разделить на 2 части, пример:
Code <div style="text-align:right;padding-bottom:3px;">[ <a href="$ADD_ENTRY_LINK$">Добавить новость</a> ]</div>
Тут может быть любой Ваш текст, картинка и т.д.
<?if($ADD_ENTRY_LINK$)?> <?endif?>$LAST_NEWS$
Материалы на эту же тему:
В строке браузера отображается название темы форума
Изменяем цвет ника в мини-чате
Слайд-шоу работает на любом сайте
Вставляем слайд-шоу в любое место на сайте
Создаём свой код ББкнопки через HTML тэг
Создание информера "Анекдотов, афоризмов и т.д." на Ucoz
Самая простая установка новых смайлов на сайт
Создаём блок "Новые материалы"
Создаём из модуля тесты полноценный чат!
Создаём для каждого раздела сайта свою шапку
Если нет Аватара, появляется Аватар со знаком зодиака
Как добавить глобальный блок на страницу форума Ucoz
|
| |
| |
| bandjuk | Дата: Воскресенье, 11.12.2011, 16:41 | Сообщение # 275 | Тема: Скрипт "Оповещение о новом ЛС + звук" |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Отличный скрипт оповещение о новом ЛС.
Сообщение о новом ЛС появляется в окошке в правом нижнем углу сайта + играет звук как в Icq ,но вы его можете поменять на любой другой свой звук или мелодию!
Особенности:
- icq звук;
- виден ник отправителя;
- видно само сообщение;
- длинные сообщения обрезаются;
- автоматическая подгрузка (не надо обновлять страницу);
- получение системных сообщений (репутация и т.п.);
Установка:
Чтобы сообщение появлялось на всех страницах сайта, откройте:
Панель управления ---> Управление дизайном ---> Глобальные блоки ---> Нижняя часть сайта, в самый верх вставте код:
Quote <?if ($USER_LOGGED_IN$)?> <script type="text/javascript"> function icqmess(){ $.get('/index/14',function(data){ $('.unread',data).each(function(){ username = $(this).parent().next().text() link = $(this).parent().attr('href') $.get($(this).parent().attr('href'),function(data1){ mytext = $('td[colspan=2]:odd',data1).text().split('[ Написать ответ ]') if(mytext[0].length>40){ mn = ' ...' }else {mn = ''} _uWnd.alert('<a class="messlink" target="blank" href="'+link+'">' + mytext[0].slice(0, 40) + mn + '</a>' ,username,{name: 'ls' +mytext, close:1,tm:100000}) }//data1 )//get1 $('body').append('<embed type="application/x-shockwave-flash" src="http://s104.ucoz.net/flash/audio1.swf?song_url=http://ssilki.at.ua/files/icq.mp3&autoplay=1&loop=0" width="0" height="0"/>') })//each } //data )//get setTimeout(icqmess, 50000) }//function icqmess() </script> <?endif ?> <style> .messlink{text-decoration: none!important} </style>
url=http://ssilki.at.ua/files/icq.mp3 - адрес мелодии, можете изменить!
Материалы на эту же тему:
Скрипт "Кнопка Google+ для новостей сайта Ucoz"
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Классные медали на форум"
Скрипт "Кнопка добавить материал, новость"
Скрипт "Фоновое изображение на форуме"
|
| |
| |
| bandjuk | Дата: Воскресенье, 11.12.2011, 19:56 | Сообщение # 276 | Тема: Создаём свой код ББкнопки через HTML тэг |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Благодаря этой статье Вы сможете научится создавать свои ББкнопки для форума Ucoz.
Итак, начнём!
1. Создадим скрипт нашей ББкнопки
Открываем:
Панель управления ---> Управление дизайном ---> Форум ---> Общий вид форума и ставим в самый низ код:
Code <script type="text/javascript">
// by $USERNAME$
$('td.posttdMessage').each(function(){
$(this).html($(this).html().split('[bbcode]').join('bbcode').split('[/bbcode]').join('/bbcode'));
});
</script>
Расшифровка кода:
[bbcode] - открывающий бб-код (например [marquee]
[/bbcode] - закрывающий бб-код (например [/marquee])
bbcode - html содержимое открывающего бб-кода (например <marquee>)
/bbcode - html содержимое закрывающего бб-кода (например </marquee>)
Пример:
Создадим бегущую строку, подставив в код выше тэг бегущей строки marquee
:
Code <script type="text/javascript">
// by $USERNAME$
$('td.posttdMessage').each(function(){
$(this).html($(this).html().split('[marquee]').join('<marquee>').split('[/bbcode]').join('</marquee>'));
});
</script>
Скрипт создан!
1. Теперь нужно создать саму кнопку! Для этого открываем:
Панель управления ---> Управление дизайном ---> Форум ---> Форма добавления сообщений после $BBCODES$ пишем:
Code <input type="button" value="bbcode" onclick="simpletag('bbName','','','message',''); return false;" class="codeButtons"/>
Расшифровка кода:
bbcode меняем на текст надписи, который будет на кнопке (в нашем случае это "Бегущая строка")
bbName - меняете на название вашего бб-кода БЕЗ квадратных скобок (например "marquee").
Пример для нашей бегущей строки:
Code <input type="button" value="Бегущая строка" onclick="simpletag('marquee','','','message',''); return false;" class="codeButtons"/>
Всё кнопка бегущей строки создана! Если Вы сделали всё правильно, о она появится в форме добавления сообщения рядом с другими ББкнопками!
Материалы на эту же тему:
В строке браузера отображается название темы форума
Изменяем цвет ника в мини-чате
Слайд-шоу работает на любом сайте
Вставляем слайд-шоу в любое место на сайте
Как вставить текст перед новостями сайта на главной
Создание информера "Анекдотов, афоризмов и т.д." на Ucoz
Самая простая установка новых смайлов на сайт
Создаём блок "Новые материалы"
Создаём из модуля тесты полноценный чат!
Создаём для каждого раздела сайта свою шапку
Если нет Аватара, появляется Аватар со знаком зодиака
Как добавить глобальный блок на страницу форума Ucoz
|
| |
| |
| bandjuk | Дата: Воскресенье, 11.12.2011, 22:11 | Сообщение # 277 | Тема: Красивые иконки онлайн и оффлайн для Ucoz |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Красивые иконки онлайн и оффлайн для Ucoz.
Можете воспользоваться моим кодом или залить их себе на сайт.
Не знаете как заменить слова онлайн и оффлайн на картинку?
Тогда читайте статью: "Замена слов онлайн и офлайн на картинку"
Code http://ssilki.at.ua/image/Forum/online.gif
Code http://ssilki.at.ua/image/Forum/offline.gif
Материалы на эту же тему:
Иконки групп - тёмные
Классный новогодний дракон (фон прозрачный)
Красивые анимированные иконки групп для Ucoz
Тёмные иконки групп для Ucoz
Разноцветные иконки групп для Ucoz
Красивые иконки групп на тему фильма "Аватар"
Иконки групп пользователей для светлых дизайнов
Красивые иконки групп для Ucoz
|
| |
| |
| bandjuk | Дата: Воскресенье, 11.12.2011, 23:04 | Сообщение # 278 | Тема: Скрипт "Просилка регистрации для Ucoz" с приколом! |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Данный скрипт в прикольной форме! просит гостей авторизоваться или зарегистрироваться на сайте, после авторизации окошко появляться не будет.
Установка:
Панель Управления ---> Управление дизайном ---> Глобальные блоки ---> Нижняя (или Верхняя) часть, в самый верх ставим код:
Code <?if($USER_LOGGED_IN$)?><?else?><script type="text/javascript">window.onload = function () {new _uWnd('site','',-275,-70,{align:'center',header:0,resize:0,nomove:1,modal:0},'<div>Если Вы зашли на наш сайт,<br>мы Вам дожны деньги!<br> Регистрируйтесь и получайте!</div><hr><a href="/index/3">Регистрация</a> | <a href="javascript://" onclick="_uWnd.close(\'site\');new _uWnd(\'LF\',\' \',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:\'/index/40\'});return false;">Быстрый вход</a> | <a href="javascript://" onclick="_uWnd.close(\'site\')">Закрыть окно</a><hr>');}</script><?endif?>
Материалы на эту же тему:
Скрипт "Просилка регистрации для Ucoz" со звуком!
Скрипт "Оповещение о новом ЛС + звук"
Скрипт "Кнопка Google+ для новостей сайта Ucoz"
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Классные медали на форум"
Скрипт "Кнопка добавить материал, новость"
|
| |
| |
| bandjuk | Дата: Понедельник, 12.12.2011, 01:39 | Сообщение # 279 | Тема: Скрипт "Просилка регистрации для Ucoz" со звуком! |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Данный скрипт в прикольной форме просит гостей авторизоваться или зарегистрироваться на сайте+звук входа на сайт, после авторизации окошко появляться не будет.
Установка:
Панель Управления ---> Управление дизайном ---> Глобальные блоки ---> Нижняя (или Верхняя) часть, в самый верх ставим код:
Code <?if($USER_LOGGED_IN$)?><?else?><script type="text/javascript">window.onload = function () {new _uWnd('site','',-275,-70,{align:'center',header:0,resize:0,nomove:1,modal:0},'<div>Если Вы зашли на наш сайт,<br>мы Вам дожны деньги!<br> Регистрируйтесь и получайте!</div><hr><a href="/index/3">Регистрация</a> | <a href="javascript://" onclick="_uWnd.close(\'site\');new _uWnd(\'LF\',\' \',-250,-110,{autosize:0,closeonesc:1,resize:1},{url:\'/index/40\'});return false;">Быстрый вход</a> | <a href="javascript://" onclick="_uWnd.close(\'site\')">Закрыть окно</a><hr>');} $('body').append('<embed type="application/x-shockwave-flash" src="http://s104.ucoz.net/flash/audio1.swf?song_url=http://ssilki.at.ua/files/20.mp3&autoplay=1&loop=0" width="0" height="0"/>') </script><?endif?>
Материалы на эту же тему:
Скрипт "Просилка регистрации для Ucoz" с приколом!
Скрипт "Оповещение о новом ЛС + звук"
Скрипт "Кнопка Google+ для новостей сайта Ucoz"
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Классные медали на форум"
Скрипт "Кнопка добавить материал, новость"
|
| |
| |
| bandjuk | Дата: Понедельник, 12.12.2011, 13:26 | Сообщение # 280 | Тема: Скрипт "Кнопка Google+ для новостей сайта Ucoz" |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
kraken, этот код можно ставить куда угодно!
|
| |
| |
| bandjuk | Дата: Понедельник, 12.12.2011, 13:35 | Сообщение # 281 | Тема: Скрипт "Кнопка Google+ для новостей сайта Ucoz" |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
kraken, ну тут просто расписано, что и как ставить именно для этого модуля!
|
| |
| |
| bandjuk | Дата: Понедельник, 12.12.2011, 16:33 | Сообщение # 282 | Тема: Скрипт "Кнопка "вернуться на главную в ЛС" |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Вот решил сделать кнопку "На главную" в личных сообщениях. Теперь Вы можете после отправки сообщения, нажав на эту кнопку вернуться на главную страницу сайта.
Установка:
Панель управления ---> Управление дизайном ---> Пользователи ---> Личные сообщения (ЛС)
вставляем скрипт сразу после $BODY$:
Code <CENTER><FORM> <input TYPE="button" VALUE="На главную" ONCLICK="HomeButton()">
<script>
function HomeButton()
{
location.href="http://адрес главной страницы Вашего сайта";
}
</script> </FORM></CENTER>
Не забудьте поменять надпись "адрес главной страницы Вашего сайта" на свой адрес!
Материалы на эту же тему:
Скрипт "Просилка регистрации для Ucoz" со звуком!
Скрипт "Просилка регистрации для Ucoz" с приколом!
Скрипт "Оповещение о новом ЛС + звук"
Скрипт "Кнопка Google+ для новостей сайта Ucoz"
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Классные медали на форум"
|
| |
| |
| bandjuk | Дата: Понедельник, 12.12.2011, 18:35 | Сообщение # 283 | Тема: Обмен статьями |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Ребята! Все, у кого есть сайт, и его тема схожа с темой этого сайта (полезные ссылки, скрипты для Ucoz) пишите тут свои заявки, и я с удовольствием размещу на своём сайте Вашу статью или скрипт с указанием источника с активной ссылкой! В обмен Вы разместите одну из моих статей (скриптов) у себя на сайте на тех же условиях.
Это замечательный способ поднятия ТИЦ и PR сайта + ссылка на Ваш сайт!
К обмену принимаются сайты:
Тиц >=10
PR >= 2
Посещаемостью не ниже 100 уникальных посетителей!
|
| |
| |
| bandjuk | Дата: Вторник, 13.12.2011, 12:09 | Сообщение # 284 | Тема: Создание красивого раздвижного меню для сайта. |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Привет всем! В этой статье я хочу научить Вас создавать собственное красивое раздвижное меню для сайта.
В качестве примера возьму код меню с этой страницы.
Вот код красивого раздвижного меню для сайта.
Этот код состоит из трёх пунктов меню.
1 пункт - содержит в себе 7 подпунктов;
2 пункт - 2 подпункта;
3 пункт - 1 подпункт;
Code <div style="width: 175px;"> <style type="text/css" media="all"> .menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;} .menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;} .menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;} </style> <div style="width: 175px;"> <style type="text/css" media="all"> .menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;} .menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;} .menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;} </style> <span class="menu"><a onclick="$('#1').slideToggle(200);" href="javascript://"><FONT size="3"> <img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Пункт меню 1</a></font></span> <BR> <div id="1" style="display:none"><span class="menu1"> <a href="http://адрес страницы">Подменю 1</a><BR> <a href="http://адрес страницы">Подменю 2</a><BR> <a href="http://адрес страницы">Подменю 3</a><BR> <a href="http://адрес страницы">Подменю 4</a><BR> <a href="http://адрес страницы">Подменю 5</a><BR> <a href="http://адрес страницы">Подменю 6</a><BR> <a href="http://адрес страницы">Подменю 5</a> <BR> <a href="http://адрес страницы">Подменю 7</a> <BR> </span> </div> <span class="menu"><a onclick="$('#2').slideToggle(200);" href="javascript://"><FONT size="3"> <img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 2</a></FONT></span><BR> <div id="2" style="display:none"><span class="menu1"> <a href="http://адрес страницы">Подменю 1</a> <BR> <a href="http://адрес страницы">Подменю 2</a> <BR> </span></div> <span class="menu"><a onclick="$('#3').slideToggle(200);" href="javascript://"><FONT size="3"> <img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 3</a></FONT></span><BR> <div id="3" style="display:none"><span class="menu1"> <a href="адрес страницы">Подменю 1</a> <BR> </span></div>
Итак, начнём разбираться что к чему!
Разделим этот код на две части.
1. Оформление.
Code <div style="width: 175px;"> <style type="text/css" media="all"> .menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;} .menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;} .menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;} </style> <div style="width: 175px;"> <style type="text/css" media="all"> .menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;} .menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;} .menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;} </style>
Разберём этот код меню по частям
1.1. Этот код задаёт внешний вид пункту меню.
Code <div style="width: 175px;"> - отвечает за ширину основного меню.
<style type="text/css" media="all">
.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
.menu a:link, .menu a:visited {color:#FDBC40;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/1.png') no-repeat left center;border-top: 1px solid #101010;border-right: 1px solid #101010;border-left: 1px solid #101010;border-bottom: 1px solid #101010;text-align: left; margin-top:1px;}
.menu a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:5px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/2.png') no-repeat left center;text-align: left; margin-top:1px;}
</style>
.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
height:10px; - ширина основного меню;
width: 175px; - длина основного меню;
font: normal 10px Arial, Helvetica, sans-serif; - стили текста;
text-align: left; - выравнивание текста основного меню (слева, справа, по ширине)
margin-top:1px; - Устанавливает величину отступа от верхнего края элемента.
1.2. Этот код задаёт внешний вид подпункту меню.
Code <div style="width: 175px;">
<style type="text/css" media="all">
.menu1 {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left;}
.menu1 a:link, .menu1 a:visited {color:#FDBC40;padding-left:14px;line-height:10px;display:block;font-weight:normal;background: #101010 url('http://ssilki.at.ua/menu/3.png') no-repeat left center;border-right: 1px solid #101010;border-bottom: 1px solid #101010;border-left: 1px solid #101010;text-align: left;}
.menu1 a:hover {color:#ffffff;text-shadow:0 0 5px ;padding-left:14px;line-height:10px;display:block;font-weight:normal;border-bottom: 1px solid #ff0000;background: #101010 url('http://ssilki.at.ua/menu/4.png') no-repeat left center;text-align: left;}
</style>
Всё то же самое как и пункте 1.1.
2. Код отвечающий за количество пунктов и подпунктов меню
1.1 Код пункта меню:
Каждое новый пункт меню следует создавать по такому шаблону
Code <span class="menu"><a onclick="$('#3').slideToggle(200);" href="javascript://"><FONT size="3"> <img src="http://fotki.ucoz.ua/images/2.png" hspace="5"border="0" >Меню 3</a></FONT></span><BR> <div id="3" style="display:none"><span class="menu1"> <a href="адрес страницы">Подменю 1</a> <BR> </span></div>
каждый следующий подпункт (подменю) создаётся кодом:
<a href="адрес страницы">Подменю 1</a> <BR>
таких подпунктов может быть сколько угодно!
Вот и всё! По-моему ничего сложного тут нет!
Для создания нескольких блоков меню на сайте просто переименуйте названия стилей меню .menu и .menu1
напирер на .m и .m1.
Материалы на эту же тему:
Создание абзаца в тексте
Специальные символы
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу
|
| |
| |
| bandjuk | Дата: Вторник, 13.12.2011, 14:32 | Сообщение # 285 | Тема: Создание красивого раздвижного меню для сайта. |
Генерал-лейтенант
Группа: Администраторы
Пол:
|
Будут вопросы, пишите! Помогу всем!
|
| |
| |
|
