/    Sign up×
Community /Pin to ProfileBookmark

Responsive css/html dropdown list

Copy linkTweet thisAlerts:
Oct 10.2016

I have a German based language site: [url]http://www.azreferate.com[/url] with informations about different topics.

I want to implement a simple responsive css/html dropdown list (mobile and desktop) for my site on pages like this on the right side of the site
[url]http://www.azreferate.com/liste-referate/geographie/index28.php[/url]

But the dropdown shold be SMALL on MOBILE and bigger on desktop or tablets

I want to add a new dropdown box to select category before search button is hitted.

How can i do that?

I need some html/css code suggestions, to make this.

Thanks all

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@MiaCharlotteOct 10.2016 — [code=html]
<header>
<nav id='cssmenu'>
<div class="logo"><a href="index.html">Responsive </a></div>
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
</header>
<section style='padding-top:20px;font:bold 44px arial;color:#68D800;'>
Responsive CSS3 Menu <br />Dropdown + Submenus <br />
Width Toggle Animation
</section>
[/code]

Please check this menu style.
Copy linkTweet thisAlerts:
@jedaisoulOct 10.2016 — I do not see any drop down menus on the right of the page you linked. Also, I'm not sure what you meant by:


the dropdown shold be SMALL on MOBILE and bigger on desktop or tablets
[/quote]

I.e. In what sense should it be "small" on mobiles? Smaller font? Abbreviated?...

One way to achieve this is to test for max-device-width. E.g.

<i>
</i>.drop {
font-size: 16px;
}
@media screen and (max-device-width:599px) {
.drop {
font-size: 12px;
}
}
×

Success!

Help @azreferate spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...