Не пойму, как вставить изображение. У меня горизонтальное меню высотой 50 px, сделал
изображение, которое хочу поставить вместо маркера списка, высота изображения тоже 50 px.
Код страницы:
.menu{
background-image: url(images/fon_menu.jpg);
height: 50px;
}
li {
float: left;
list-style-image: url(images/kn_cl.png);
font-family: sans-serif;
font-size: 20px;
margin: 10px 40px;
}
Если в li пишу display: inline или inline-block, то маркеры и изображения вообще
не отображаются, исчезают.
С тем кодом, который есть сейчас, всё работает, но изображение смещает текст ссылки.
Таким образом вместо маркера получается поставить только изображение такой высоты,
какую высоту имеет текст ссылки (20 px). Если высота больше, сдвигается текст.
Ответы
Ответ 1
Вместо list-style-image лучше используйте обычный background. С его помощью можно
гибко настроить позицию изображения, чего не получится в случае с list-style-image
http://jsfiddle.net/8fV3X/
Хочу сделать меню, которое открывается по нажатию на кнопку и закрывается при клике
по любой части экрана. Проблема в том, что меню закрывается при клике куда угодно,
кроме кнопки открывания.
По моей задумке, после открытия меню класс у кнопки убирается и она должна становиться
неактивна, а значит становится такой же как и любая часть документа, но этого почему-то
не происходит. В чем моя ошибка?
$(document).ready(function() {
$(hidden).slideUp();
$('.switch').click(function() {
$(hidden).slideDown(300);
$('#drop-but').removeClass('switch');
return false;
});
$(document).click(function() {
$(hidden).slideUp(300);
$('#drop-but').addClass('switch');
});
});
Дело в том, что этот обработчик:
$('.switch').click(function() {
$(hidden).slideDown(300);
$('#drop-but').removeClass('switch');
return false;
});
Отменяет все обработчики на .switch, что идут после него.
Чтобы не отменять вместо
return false;
сделайте
e.preventDefault();
Соответственно e надо указать как входящий параметр
$('.switch').click(function(e) {
Добрый вечер!
На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании
off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое.
Изначально меню видно. Ширина меню составляет 20% от ширины контейнера, ширина блока
с содержимым - 80%.
Упрощённо, задача заключается в том, что при нажатии на кнопку "Меню", меню плавно
смещается за край контейнера. В свою очередь блок содержимого плавно растягивается
до 100% от ширины контейнера.
При повторном нажатии на кнопку "Меню", слева плавно выходит меню, которое занимает
20% от ширины контейнера. В свою очередь ширина блока с содержимым плавно уменьшается
до 80%. Именно уменьшается, а не частично смещается за край контейнера. (именно это
заставило писать своё решение).
Схематически это выглядит так:
Появление/исчезновение меню я достиг за счёт css свойства "transform: translate3d(-100%,
0, 0)". Проблема в том, что при смещении меню за край контейнера, блок содержимого
хоть и растягивается до 100%, но "падает" вниз из за нехватки места. Понимаю, что за
меню остались те самые 20% от ширины контейнера.
Как быть?
Буду очень Вам благодарен за помощь!
Код:
HTML:
Доброго всем времени суток!
У меня есть ListView, и я хочу к каждому его элементу прикрутить контекстное меню.
Часто видел в приложениях, что контекстное меню для элементов листвью вызывается при
клике на специальную кнопку с тремя квадратами. Не знаю, как называется эта кнопка,
поэтому даже не могу нормально погуглить. Выглядит эта кнопка так:
Скажите, пожалуйста, что это за кнопка и как наилучшим образом приделать контекстное
меню к каждому элементу listview? Спасибо!
Ответы
Ответ 1
Кнопка называется "overflow". Скачать её можно в интернете, на habre был когда-то
пост со ссылкой на пак с разноцветными иконками.
Меню называется "PopUpMenu". Чтобы его вызвать нужно:
1) Добавить в лэйаут элемента списка саму иконку, найти её в адаптере и далее:
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
//popUp menu
holderMain.settings.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
PopupMenu popup = new PopupMenu(context, v);
popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.mark_as_read:
//действие
return true;
case R.id.share_link:
//действие
return true;
case R.id.show_comments:
//действие
return true;
default:
return false;
}
}
});
MenuInflater inflater = popup.getMenuInflater();
inflater.inflate(R.menu.popup_menu, popup.getMenu());
popup.show();
}
});
2) Ну и ещё нужен popup_menu.xml в папке /res/menu
Не пойму, как вставить изображение. У меня горизонтальное меню высотой 50 px, сделал изображение, которое хочу поставить вместо маркера списка, высота изображения тоже 50 px. Код страницы:
.menu{
background-image: url(images/fon_menu.jpg);
height: 50px;
}
li {
float: left;
list-style-image: url(images/kn_cl.png);
font-family: sans-serif;
font-size: 20px;
margin: 10px 40px;
}
Если в li пишу display: inline или inline-block, то маркеры и изображения вообще не отображаются, исчезают. С тем кодом, который есть сейчас, всё работает, но изображение смещает текст ссылки. Таким образом вместо маркера получается поставить только изображение такой высоты, какую высоту имеет текст ссылки (20 px). Если высота больше, сдвигается текст.
Ответ
Вместо list-style-image лучше используйте обычный background. С его помощью можно гибко настроить позицию изображения, чего не получится в случае с list-style-image
http://jsfiddle.net/8fV3X/
Хочу сделать меню, которое открывается по нажатию на кнопку и закрывается при клике по любой части экрана. Проблема в том, что меню закрывается при клике куда угодно, кроме кнопки открывания.
По моей задумке, после открытия меню класс у кнопки убирается и она должна становиться неактивна, а значит становится такой же как и любая часть документа, но этого почему-то не происходит. В чем моя ошибка? $(document).ready(function() {
$(hidden).slideUp(); $('.switch').click(function() {
$(hidden).slideDown(300);
$('#drop-but').removeClass('switch');
return false;
}); $(document).click(function() {
$(hidden).slideUp(300);
$('#drop-but').addClass('switch');
});
});
Добрый вечер!
На досуге занимаюсь разработкой собственного сайта и возникли трудности в создании off-canvas меню. Структура страницы состоит из трёх блоков - "шапка", меню и содержимое.
Изначально меню видно. Ширина меню составляет 20% от ширины контейнера, ширина блока с содержимым - 80%.
Упрощённо, задача заключается в том, что при нажатии на кнопку "Меню", меню плавно смещается за край контейнера. В свою очередь блок содержимого плавно растягивается до 100% от ширины контейнера.
При повторном нажатии на кнопку "Меню", слева плавно выходит меню, которое занимает 20% от ширины контейнера. В свою очередь ширина блока с содержимым плавно уменьшается до 80%. Именно уменьшается, а не частично смещается за край контейнера. (именно это заставило писать своё решение).
Схематически это выглядит так:
Появление/исчезновение меню я достиг за счёт css свойства "transform: translate3d(-100%, 0, 0)". Проблема в том, что при смещении меню за край контейнера, блок содержимого хоть и растягивается до 100%, но "падает" вниз из за нехватки места. Понимаю, что за меню остались те самые 20% от ширины контейнера.
Как быть?
Буду очень Вам благодарен за помощь!
Код:
HTML:
Доброго всем времени суток! У меня есть ListView, и я хочу к каждому его элементу прикрутить контекстное меню. Часто видел в приложениях, что контекстное меню для элементов листвью вызывается при клике на специальную кнопку с тремя квадратами. Не знаю, как называется эта кнопка, поэтому даже не могу нормально погуглить. Выглядит эта кнопка так:
Скажите, пожалуйста, что это за кнопка и как наилучшим образом приделать контекстное меню к каждому элементу listview? Спасибо!
Ответ
Кнопка называется "overflow". Скачать её можно в интернете, на habre был когда-то пост со ссылкой на пак с разноцветными иконками.
Меню называется "PopUpMenu". Чтобы его вызвать нужно: 1) Добавить в лэйаут элемента списка саму иконку, найти её в адаптере и далее: @Override
public View getView(final int position, View convertView, ViewGroup parent) {
//popUp menu
holderMain.settings.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
PopupMenu popup = new PopupMenu(context, v);
popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
switch (item.getItemId()) {
case R.id.mark_as_read:
//действие
return true;
case R.id.share_link:
//действие
return true;
case R.id.show_comments:
//действие
return true;
default:
return false;
}
}
});
MenuInflater inflater = popup.getMenuInflater();
inflater.inflate(R.menu.popup_menu, popup.getMenu());
popup.show();
}
});
2) Ну и ещё нужен popup_menu.xml в папке /res/menu
