Inhalte aufrufen

Profilbild

Mega Menu

megamenu menu navbar

  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
10 Antworten zu diesem Thema

#1 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 16 March 2015 - 15:54

Hi Guys,

I would like to change my dropdown-pull right menu to responsive real mega menu. I worked on src/Presentation/SmartStore.Web/Views/Catalog/MegaMenu.cshtml , but wasn't enough by itself. Just changing html part didn't work :) According to do this which elements should I change in solution?

 

Thank you!

Angehängte Bilder



#2 Murat Cakir

Murat Cakir

    SmartStore AG

  • Administrators
  • 1118 Beiträge

Geschrieben: 16 March 2015 - 19:01

What exactly "was not enough"? You customized the correct view, there is no other resource which needs tweaks. The model passed to the view contains all relevant information to build event the most sophisticated catalog navigation menu. Just grab Root and drilldown as you wish.


Murat Cakir
SmartStore AG


#3 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 17 March 2015 - 12:09

The pic is what I am trying to create. When I change megamenu.cshtml it doesn't work by itself. It still pulls right and just mess up the container design. I won't need z-index 2 and pulling right but I can't cancel those functions. I would appreciate If you would tell me how to cancel those functions.

 

I checked smartstore.shrinkmenu.js, common.less, megamenu.cshtml, navbar.less, dropdown.less but still couldn't figure out. 

 

Thank you! 



#4 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 17 March 2015 - 13:38

I think the easier way and right question will be...

 

How can I override my html, java and css on navbar?



#5 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 17 March 2015 - 13:55

Here is my html

 

<ul class="nav">
<li><a href="#">Furniture</a>
        <div class="container-4">
            <div class="col1">
                <h3>Living Room</h3>
                <ul>
                    <li><a href="#">Sofa-Loveseat</a></li>
                    <li><a href="#">Coffee-End Tables</a></li>
                    <li><a href="#">TV-Media Units</a></li>
                    <li><a href="#">Living Room Sets</a></li>
                </ul>
            </div>
            <div class="col1">
                <h3>Bedroom</h3>
                <ul>
                    <li><a href="#">Beds</a></li>
                    <li><a href="#">Storage</a></li>
                    <li><a href="#">Dresseing Tables</a></li>
                    <li><a href="#">Test Item 1</a></li>
                    <li><a href="#">Test Item 2</a></li>
                </ul>
            </div>
            <div class="col1">
                <h3>Dining Room</h3>
                <ul>
                    <li><a href="#">Ding Tables</a></li>
                    <li><a href="#">Dining Chairs</a></li>
                    <li><a href="#">Dining Sets</a></li>
                    <li><a href="#">Test Item 1</a></li>
                    <li><a href="#">Test Item 2</a></li>
                </ul>
            </div>
                        <div class="col1">
                <h3>Bathroom</h3>
                <ul>
                    <li><a href="#">Bathroom Furniture</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </div>
            <div class="col4 highlighted">
                <h3>Whatever I want to say here</h3>
                <p>Whatever they need to do</p>
            </div>
            <div class="col1">
                <h3>Baby-Todler Rooms</h3>
                <ul>
                    <li><a href="#">Beds</a></li>
                    <li><a href="#">Storage</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </div>
            <div class="col1">
                <h3>Other Furniture</h3>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </div>
            <div class="col2">
                <h3>Decoration</h3>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </div>
            <div class="col4 highlighted">
                <h3>Do not miss our Outdoor Furniture deals!</h3>
                <p>10% OFF on every outdoor furniture item</p>
            </div>
        </div>    
    </li>
    <li><a href="#">Lighting</a></li>
    <li><a href="#">Textiles-Rugs</a></li>
    <li>
        <a href="#">Office Furniture</a>
        <div class="container-1 right">
        </div>
    </li>
    <li><a href="#">Storage Units</a></li>
    <li><a href="#">Last Item</a></li>
</ul>

 

and css

 

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}


body { font-family: "PT Sans", sans-serif; background: #f5f5f5; font-size: 100%;}
a { color: #666; text-decoration: none;}

.nav {
    background: #666;
    border-radius: 3px;
    width: 960px;
    margin: 20px auto;
    height: 43px;
}

.nav li { list-style: none;  }
.nav > li { padding: 0; float: left; position: relative; }
.nav > li > a {
    float: left;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    line-height: 43px;
    padding: 0 20px;
    border-right: 1px solid #777;
    border-left: 1px solid #555;
    height: 43px;
}
.nav > li:hover > a { background: #555;    border-right: 1px solid #666; }
.nav > li:first-child > a { border-left: 0; }
.nav > li:last-child > a { border-right: 0; }
.nav > li:hover > div { }

/* MEGA DROP DOWN */

.nav > li > div {
    position: absolute;
    left: 0;
    top: 43px;
    display: none;
    background: #fff;
    padding: 10px 10px;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}
.nav > li > div p { color: #666; }
.nav > li > div.right { right: 0; left: auto }
.container-1, .container-2, .container-3, .container-4 { font-size: 80%; }


/* COLUMNS */
.col1,.col2,.col3,.col4,.col5 { margin: 10px 0; float: left; padding: 0 10px;}


    /* 1 Column */
    .container-1 { width: 170px; }
    .container-1 .col1 { width: 100%; }

    /* 2 Column */
    .container-2 { width: 270px; }
    .container-2 .col1 { width: 50% }
    .container-2 .col2 { width: 100% }

    /* 3 Column */
    .container-3 { width: 400px; }
    .container-3 .col1 { width: 33.33% }
    .container-3 .col2 { width: 66.66% }
    .container-3 .col3 { width: 100% }


    /* 4 Column */
    .container-4 { width: 500px; }
    .container-4 .col1 { width: 25%; }
    .container-4 .col2 { width: 50% }
    .container-4 .col3 { width: 75% }
    .container-4 .col4 { width: 100% }


    /* 5 Column */
    .container-5 { width: 600px; }
    .container-5 .col1 { width: 20%; }
    .container-5 .col2 { width: 40% }
    .container-5 .col3 { width: 60% }
    .container-5 .col4 { width: 80% }
    .container-5 .col5 { width: 100% }

/* HIGHLIGHTS */

.container-3 .highlighted {
    width: 400px;
    ;
    padding: 20px;
    background: #e4fbff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.container-4 .highlighted {
    width: 500px;
    ;
    padding: 20px;
    background: #e4fbff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}



.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

 

and javascript

 

$('.nav > li').hover(function(){
    $(this).find('.container-4').stop().slideDown('fast');
},
function(){
    $(this).find('.container-4').stop().slideUp('slow');
});



#6 Murat Cakir

Murat Cakir

    SmartStore AG

  • Administrators
  • 1118 Beiträge

Geschrieben: 17 March 2015 - 19:38

Do you have an URL for me where I can take a look at it?

 

Anyway, a tipp: why don't you build your menu from scratch? I mean, without inheriting SmartStore's CSS rules. Just replace or remove all classes like navbar, nav, nav-smart, shrinkable etc. This way it's much easier to build a totally different navigation mechanism.


  • dia_noche gefällt das

Murat Cakir
SmartStore AG


#7 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 17 March 2015 - 22:49

Thank you for the answer. I am still working on my local. No URL yet. I don't want to mess the product-category relationship. I will need those relationships :) All I need is more visual navbar for the site. We made bunch of changes on the system. We also made some changes for B2B. Now I am stuck with Mega Menu.

 

Is there any way to implement these codes into Smartstore? If so how can I do it?

 

Thank you!



#8 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 18 March 2015 - 11:34

or if I need to remove navbar and ctegory display and implement my own html, css, java scripts which classes should I change or remove?

 

Thank you for you help Mr. Cakir!



#9 dia_noche

dia_noche

    Newbie

  • Members
  • Punkt
  • 9 Beiträge

Geschrieben: 18 March 2015 - 13:02

and can I display all catergories under each other(instead of pulling right) with just changing CategoryNavigation.cshtml ?

 

Category 1
  Category 1.1
  Category 1.2
  Category 1.3

Category 2
  Category 2.1
  Category 2.2
  Category 2.3



#10 Murat Cakir

Murat Cakir

    SmartStore AG

  • Administrators
  • 1118 Beiträge

Geschrieben: 18 March 2015 - 17:59

and can I display all catergories under each other(instead of pulling right) with just changing CategoryNavigation.cshtml ?

 

Category 1
  Category 1.1
  Category 1.2
  Category 1.3

Category 2
  Category 2.1
  Category 2.2
  Category 2.3

 

Yes, of course. But your questions don't really relate to how SmartStore.NET works, but rather to general CSS & HTML. I don't know how to help you without writing a large CSS tutorial here, and this is really time consuming. I already gave you the tipp to strip down all SmartStore specific CSS and HTML and reshape the given model as you wish.


  • dia_noche gefällt das

Murat Cakir
SmartStore AG


#11 Guest_RJDop_*

Guest_RJDop_*
  • Guests

Geschrieben: 25 September 2016 - 10:24

It is conflicts between different js files. I could not figureout. Js file for mega menu and lightbox are conflict. But my no conflict code does not worked


Auch markiert mit einem oder mehrerer dieser Schlüsselwörter: megamenu, menu, navbar